|
|
@@ -5,18 +5,20 @@
|
|
|
ref="uploader"
|
|
|
v-bind="$attrs"
|
|
|
v-model="fileList"
|
|
|
- :before-read="beforeRead"
|
|
|
- :after-read="afterRead"
|
|
|
:max-count="maxCount"
|
|
|
:multiple="multiple"
|
|
|
+ @click-upload="useCamera(2)"
|
|
|
@delete="deleteHandler"
|
|
|
:max-size="maxSize * 1024 * 1024"
|
|
|
-
|
|
|
/>
|
|
|
+ <!-- :after-read="afterRead" -->
|
|
|
+ <!-- :before-read="beforeRead" -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { upload } from '@/api/public'
|
|
|
+import { imgUrl } from '@/utils'
|
|
|
+import { uploadBase64 } from '@/api/public'
|
|
|
+
|
|
|
import ImageCompressor from 'js-image-compressor'
|
|
|
import config from '@/config/index'
|
|
|
export default {
|
|
|
@@ -47,13 +49,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ window.openCameraCallBack = this.openCameraCallBack
|
|
|
+ },
|
|
|
watch: {
|
|
|
value: {
|
|
|
handler(val) {
|
|
|
this.imageList = this.fileList = val.map(v => {
|
|
|
let imgUrl = process.env.NODE_ENV === 'development' ? '/dev' + v.path : window.origin + v.path
|
|
|
- console.log(imgUrl)
|
|
|
+
|
|
|
return {
|
|
|
name: v.name,
|
|
|
url: imgUrl,
|
|
|
@@ -66,105 +70,156 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- //上传前压缩
|
|
|
- beforeRead(file) {
|
|
|
- console.log(file, '图片压缩前')
|
|
|
- //当前是多文件的时候
|
|
|
- if (file.length > 1) {
|
|
|
- let list = []
|
|
|
- for (let index = 0; index < file.length; index++) {
|
|
|
- const element = file[index]
|
|
|
- list.push(
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- new ImageCompressor({
|
|
|
- file: element,
|
|
|
- quality: 0.6,
|
|
|
- success: result => {
|
|
|
- console.log(result, '图片压缩后')
|
|
|
- let imgFile = new File([result], result.name, {
|
|
|
- width: result.width,
|
|
|
- height: result.height,
|
|
|
- type: result.type
|
|
|
- })
|
|
|
- console.log(imgFile, '后')
|
|
|
- resolve(imgFile)
|
|
|
- },
|
|
|
- error: e => {
|
|
|
- this.$toast(e)
|
|
|
- reject(e)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- )
|
|
|
- return list
|
|
|
+ useCamera(actionType) {
|
|
|
+ window.openCameraCallBack = null
|
|
|
+ window.openCameraCallBack = this.openCameraCallBack
|
|
|
+ let parms = {}
|
|
|
+ if (actionType) {
|
|
|
+ parms.actionType = actionType
|
|
|
+ }
|
|
|
+ let system = this.isAndroidOrIos()
|
|
|
+ if (system === 1) {
|
|
|
+ //android
|
|
|
+ // 判断当前环境是是否存在 js桥 'sap'
|
|
|
+ const hasSap = window.hasOwnProperty('sap')
|
|
|
+ if (hasSap) {
|
|
|
+ // 判断是否存在方法 ?preview
|
|
|
+ const fun = sap.hasOwnProperty('openCamera')
|
|
|
+ if (fun) {
|
|
|
+ sap.openCamera(JSON.stringify(parms))
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- new ImageCompressor({
|
|
|
- file,
|
|
|
- quality: 0.6,
|
|
|
- success: result => {
|
|
|
- console.log(result, '图片压缩后')
|
|
|
- let imgFile = new File([result], result.name, {
|
|
|
- width: result.width,
|
|
|
- height: result.height,
|
|
|
- type: result.type
|
|
|
- })
|
|
|
- console.log(imgFile, '后')
|
|
|
- resolve(imgFile)
|
|
|
- },
|
|
|
- error: e => {
|
|
|
- this.$toast(e)
|
|
|
- reject(e)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
}
|
|
|
- },
|
|
|
- //上传到服务器
|
|
|
- afterRead(fileObj) {
|
|
|
- console.log(fileObj)
|
|
|
- //多文件上传
|
|
|
- if (this.multiple&&fileObj instanceof Array) {
|
|
|
- for (let index = 0; index < fileObj.length; index++) {
|
|
|
- const element = fileObj[index]
|
|
|
- let formData = new FormData()
|
|
|
- formData.append('file', element.file)
|
|
|
- upload(formData, 'image')
|
|
|
- .then(res => {
|
|
|
-
|
|
|
- /*上传成功*/
|
|
|
- let imgUrl =
|
|
|
- process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
-
|
|
|
- this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
- this.$emit('input', this.imageList)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- /*上传失败*/
|
|
|
|
|
|
- this.$toast.fail('上传失败')
|
|
|
- })
|
|
|
+ if (system === 2) {
|
|
|
+ //ios
|
|
|
+ // 判断 ios是否存在方法 preview
|
|
|
+ const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
|
|
|
+ if (preview) {
|
|
|
+ window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
|
|
|
}
|
|
|
- } else {
|
|
|
- let formData = new FormData()
|
|
|
- formData.append('file', fileObj.file)
|
|
|
- upload(formData, 'image')
|
|
|
- .then(res => {
|
|
|
- /*上传成功*/
|
|
|
- let imgUrl =
|
|
|
- process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
-
|
|
|
- this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
- this.$emit('input', this.imageList)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- /*上传失败*/
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- this.$toast.fail('上传失败')
|
|
|
- })
|
|
|
+ openCameraCallBack(data) {
|
|
|
+ let img = JSON.parse(data)
|
|
|
+ this.content = data
|
|
|
+ let params = {
|
|
|
+ extension: img.extension,
|
|
|
+ content: img.content
|
|
|
}
|
|
|
+ uploadBase64(params)
|
|
|
+ .then(res => {
|
|
|
+ /*上传成功*/
|
|
|
+ this.$toast.success('上传成功')
|
|
|
+ this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url), path: res.data.url })
|
|
|
+ this.$emit('input', this.imageList)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ /*上传失败*/
|
|
|
+ this.$toast.fail('上传失败')
|
|
|
+ this.fileList.splice(this.fileList.length - 1, 1)
|
|
|
+ })
|
|
|
},
|
|
|
+ // //上传前压缩
|
|
|
+ // beforeRead(file) {
|
|
|
+ // console.log(file, '图片压缩前')
|
|
|
+ // //当前是多文件的时候
|
|
|
+ // if (file.length > 1) {
|
|
|
+ // let list = []
|
|
|
+ // for (let index = 0; index < file.length; index++) {
|
|
|
+ // const element = file[index]
|
|
|
+ // list.push(
|
|
|
+ // new Promise((resolve, reject) => {
|
|
|
+ // new ImageCompressor({
|
|
|
+ // file: element,
|
|
|
+ // quality: 0.6,
|
|
|
+ // success: result => {
|
|
|
+ // console.log(result, '图片压缩后')
|
|
|
+ // let imgFile = new File([result], result.name, {
|
|
|
+ // width: result.width,
|
|
|
+ // height: result.height,
|
|
|
+ // type: result.type
|
|
|
+ // })
|
|
|
+ // console.log(imgFile, '后')
|
|
|
+ // resolve(imgFile)
|
|
|
+ // },
|
|
|
+ // error: e => {
|
|
|
+ // this.$toast(e)
|
|
|
+ // reject(e)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // )
|
|
|
+ // return list
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // return new Promise((resolve, reject) => {
|
|
|
+ // new ImageCompressor({
|
|
|
+ // file,
|
|
|
+ // quality: 0.6,
|
|
|
+ // success: result => {
|
|
|
+ // console.log(result, '图片压缩后')
|
|
|
+ // let imgFile = new File([result], result.name, {
|
|
|
+ // width: result.width,
|
|
|
+ // height: result.height,
|
|
|
+ // type: result.type
|
|
|
+ // })
|
|
|
+ // console.log(imgFile, '后')
|
|
|
+ // resolve(imgFile)
|
|
|
+ // },
|
|
|
+ // error: e => {
|
|
|
+ // this.$toast(e)
|
|
|
+ // reject(e)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // //上传到服务器
|
|
|
+ // afterRead(fileObj) {
|
|
|
+ // console.log(fileObj)
|
|
|
+ // //多文件上传
|
|
|
+ // if (this.multiple&&fileObj instanceof Array) {
|
|
|
+ // for (let index = 0; index < fileObj.length; index++) {
|
|
|
+ // const element = fileObj[index]
|
|
|
+ // let formData = new FormData()
|
|
|
+ // formData.append('file', element.file)
|
|
|
+ // upload(formData, 'image')
|
|
|
+ // .then(res => {
|
|
|
+
|
|
|
+ // /*上传成功*/
|
|
|
+ // let imgUrl =
|
|
|
+ // process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
+
|
|
|
+ // this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
+ // this.$emit('input', this.imageList)
|
|
|
+ // })
|
|
|
+ // .catch(err => {
|
|
|
+ // /*上传失败*/
|
|
|
+
|
|
|
+ // this.$toast.fail('上传失败')
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // let formData = new FormData()
|
|
|
+ // formData.append('file', fileObj.file)
|
|
|
+ // upload(formData, 'image')
|
|
|
+ // .then(res => {
|
|
|
+ // /*上传成功*/
|
|
|
+ // let imgUrl =
|
|
|
+ // process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
+
|
|
|
+ // this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
+ // this.$emit('input', this.imageList)
|
|
|
+ // })
|
|
|
+ // .catch(err => {
|
|
|
+ // /*上传失败*/
|
|
|
+
|
|
|
+ // this.$toast.fail('上传失败')
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // },
|
|
|
//删除
|
|
|
deleteHandler() {
|
|
|
let imageList = JSON.parse(JSON.stringify(this.fileList))
|