77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<view class="">
|
||
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
|
|
:maxCount="10"></u-upload>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
TOKENNAME,
|
||
|
|
HTTP_REQUEST_URL
|
||
|
|
} from '@/config/app.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fileList1: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 删除图片
|
||
|
|
deletePic(event) {
|
||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
|
},
|
||
|
|
// 新增图片
|
||
|
|
async afterRead(event) {
|
||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
|
|
let lists = [].concat(event.file)
|
||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
||
|
|
lists.map((item) => {
|
||
|
|
this[`fileList${event.name}`].push({
|
||
|
|
...item,
|
||
|
|
status: 'uploading',
|
||
|
|
message: '上传中'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
for (let i = 0; i < lists.length; i++) {
|
||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
||
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
||
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
|
|
status: 'success',
|
||
|
|
message: '',
|
||
|
|
url: result
|
||
|
|
}))
|
||
|
|
fileListLen++
|
||
|
|
}
|
||
|
|
},
|
||
|
|
uploadFilePromise(url) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
let a = uni.uploadFile({
|
||
|
|
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||
|
|
filePath: url,
|
||
|
|
// formData: {
|
||
|
|
// 'filename': rsp.path,
|
||
|
|
// 'name': that.imgName
|
||
|
|
// },
|
||
|
|
header: {
|
||
|
|
// #ifdef MP
|
||
|
|
"Content-Type": "multipart/form-data",
|
||
|
|
// #endif
|
||
|
|
[TOKENNAME]: 'Bearer ' + this.$store.state.app.token
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
resolve(res.data.data)
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|