<template>
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
:deletable = 'deletable'
:IconFlag = 'deletable'
name="1"
multiple
:maxCount="10"
>
</u-upload>
</template>
<script>
import {
BASE_URL
} from '@/http/baseUrl.js' // 项目环境地址
export default {
props:{
//上传的地址
ApiUrl:{
type:String,
default:''
},
//显示已上传的文件列表
fileList:{
type:Array,
default:()=>[],
},
// 是否显示删除图片的按钮
deletable:{
type:Boolean,
default:true
},
//是否需要证件照上传方式
IdFlag:{
type:Boolean,
default:false
},
//证件照图片样子
IdImage:{
type:String,
default:''
}
},
data() {
return {
fileList1:[]
}
},
created() {
this.fileList1 = this.fileList
},
methods:{
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
console.log(lists);
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])
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(item) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: BASE_URL + this.ApiUrl,
filePath: item.url,
name: 'file',
formData: {
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
},
}
}
</script>
我在uview中的u-upload 多了一个:IconFlag = 'deletable'值
/node_modules/uview-ui/components/u-upload/u-upload.vue
/node_modules/uview-ui/components/u-upload/props里面添加参数
// 是否需要拍照头
IconFlag: {
type: Boolean,
default: uni.$u.props.upload.IconFlag
},
在upload里面修改94行代码就可
在uview组件里面找到u-upload组件
这样就可以控制,没摄像头的就默认把取消按钮控件丢弃了