1、uniapp 文件上传,使用的插件是lsj-upload,设置只能上传一个文件。上传一个文件之后,点击×删除当前上传的文件,再上传时提示“只能上传一个”,不能再上传了,和预期不符。
2、相关代码:
<template>
<view class="upload-view">
<view>
<template v-for="(item, index) in uploadFiles">
<u-tag
:key="`${childId}_${index}`"
class="d-mb-10"
type="primary"
size="large"
shape="square"
:text="item.name"
bgColor="rgba(225, 242, 255, 1)"
color="rgba(38, 113, 238, 1)"
closeColor="rgba(0, 0, 0, 1)"
:closable="true"
:show="true"
@close="tagClick"
></u-tag>
</template>
</view>
<lsj-upload
:ref="childId"
:childId="childId"
:width="width"
:height="height"
:multiple="multiple"
:formats="formats"
:size="size"
:count="count"
:instantly="instantly"
:debug="uploadDebug"
:option="uploadOption"
@uploadEnd="onuploadEnd"
>
<!-- <view class="btn" :style="{width: uploadWidth,height: uploadHeight}">上传附件</view> -->
<u-button
class="d-border-base-light-solid"
style="{width: width,height: height}"
:hairline="true"
type="info"
size="normal"
shape="square"
loadingMode="spinner"
:loadingSize="15"
icon="attach"
>点击添加附件</u-button
>
</lsj-upload>
</view>
</template>
<script>
import config from "@/config";
import { getToken } from "@/utils/token";
export default {
name: "file-upload",
props: {
// 自动上传
instantly: { type: Boolean, default: true },
// 允许上传的文件格式(多个以逗号隔开)
formats: {
type: String,
default: "pdf,doc,docx,xls,xlsx,png,jpg,bmp,jpeg",
},
// webviewID需唯一,不同窗口也不要同Id
childId: { type: String, default: "lsjUpload" },
// 文件选择触发面宽度
width: { type: String, default: "100%" },
// 文件选择触发面高度
height: { type: String, default: "80rpx" },
// 文件上传大小限制
size: { type: Number, default: 50 },
// 文件数量限制
count: { type: Number, default: 1 },
// 是否多选
multiple: { type: Boolean, default: false },
},
data() {
return {
// 是否打印日志
uploadDebug: false,
// 上传接口参数
uploadOption: {
// 上传服务器地址,需要替换为你的接口地址
url: config.apipath + "/api/upload/addFile",
// 上传附件的key
name: "file",
// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
header: {
// 示例参数可删除
Authorization: getToken(),
},
},
uploadFiles: [], //回传数组
tabIndex: 0,
};
},
methods: {
//完成上传,不管成功或者失败,时间传递给父组件
onuploadEnd(item) {
let responseText = JSON.parse(item.responseText);
if (responseText.code == 0) {
this.uploadFiles = [responseText.data];
}
// 强制更新视图
this.$forceUpdate();
this.$emit("onuploadEnd", this.uploadFiles);
},
//移除某个文件
tagClick(index) {
//name=指定文件名,不传name默认移除所有文件
if (index >= 0 && this.uploadFiles.length > 0) {
this.uploadFiles.splice(index, 1);
this.$emit("onuploadEnd", null);
}
},
},
};
</script>
<style scoped>
.upload-view {
padding-bottom: 2;
}
</style>
3、请问有小伙伴遇到类似的问题吗?感觉是删除的逻辑实现有问题,但不知道怎么改~ 谢谢