1.需要先去引入插件市场的插件
https://ext.dcloud.net.cn/plugin?id=6701
2.代码
这里的按钮我是引入了uview的，直接复制的话会报错，根据项目需求自行更改
<template>
<view>
<view class="content">
<u-button class="audit" @click="handlerClick" type="primary">
上传</u-button>
<view v-for="(item,index) in lists" class="text">
{{item.fileName}}
<u-icon @click="deleteItem(index)" name="close" style="margin-left: 20upx;" color="red" size="28">
</u-icon>
</view>
</view>
</view>
</template>
<script>
import appChooseFile from '@/js_sdk/appChooseFile/index.js'
import {
IMG_URL,
API_URL
} from '@/env'
export default {
name: "upload-file",
props: {
action: {
type: String,
default: '/file/web/add'
},
header: {
type: Object,
default () {
return {
Authorization: `Bearer ${uni.getStorageSync('tokenInfo') ? uni.getStorageSync('tokenInfo') : ''}`
};
}
},
maxCount: {
type: [String, Number],
default: 52
},
showTips: {
type: Boolean,
default: true
},
fileList: {
type: Array,
default () {
return [];
}
},
toJson: {
type: Boolean,
default: true
},
},
data() {
return {
lists: []
};
},
watch: {
formData: function(val) {
this.formData = val;
},
fileList: {
immediate: true,
handler(val) {
val.map(value => {
// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
// {
// "fileName": "1636506480(1)-已转档.pdf",
// "fileUrl": "/dev-alone/uploadFiles/files/2021-12-15/1639548404742_822479.pdf"
// }
let tmp = this.lists.some(val => {
return val.fileUrl == value.fileUrl;
})
// 如果内部没有这个图片(tmp为false)，则添加到内部
!tmp && this.lists.push(value);
});
}
},
// 监听lists的变化，发出事件
lists(n) {
this.$emit('on-list-change', n);
}
},
methods: {
deleteItem(index) {
uni.showModal({
title: '提示',
content: '您确定要删除此项吗？',
success: async (res) => {
if (res.confirm) {
this.handlerDeleteItem(index);
}
}
});
},
// 执行移除图片的动作，上方代码只是判断是否可以移除
handlerDeleteItem(index) {
this.lists.splice(index, 1);
this.$forceUpdate();
this.$emit('on-remove', index, this.lists, this.fileList);
this.showToast('移除成功');
},
handlerClick() {
if (this.maxCount <= this.lists.length) {
this.showToast('最多上传'+this.maxCount+'个文件');
return;
}
appChooseFile().then(path => {
uni.showLoading()
const task = uni.uploadFile({
// 这里可以手动配置一下baseUrl
url: IMG_URL + this.action,
filePath: path,
name: 'file',
// formData: this.formData,
header: this.header,
success: res => {
console.log(res);
// 判断是否json字符串，将其转为json格式
let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(
res
.data) : res.data;
if (![200, 201, 204].includes(res.statusCode)) {
this.uploadError(data);
} else {
// 上传成功
if (data.code == 401) {
this.doRequest()
} else if (data.code != 200) {
this.uploadError(data);
} else {
console.log(data);
this.lists.push(data.data)
this.$emit('on-success', data,this.lists);
uni.hideLoading();
}
}
},
fail: e => {
this.uploadError(e);
},
complete: res => {
this.$emit('on-change', res);
}
});
task.onProgressUpdate(res => {
if (res.progress > 0) {
this.$emit('on-progress', res);
}
});
}).catch(() => {
this.lists.push({
"fileName": "1636506480(1)-已转档.pdf",
"fileUrl": "/dev-alone/uploadFiles/files/2021-12-15/1639548184077_416848.pdf"
})
uni.hideLoading();
})
},
showToast(message, force = false) {
if (this.showTips || force) {
uni.showToast({
title: message,
icon: 'none'
});
}
},
uploadError(err) {
uni.hideLoading();
this.$emit('on-error', err);
this.showToast('上传失败，请重试');
},
}
}
</script>
<style scoped lang="scss">
.audit {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
width: 120upx;
margin-left: 0;
background-color: #529cf0;
border-radius: 5upx;
&::after {
border-radius: 5upx;
}
}
.text {
// text-align: center;
}
</style>
