需求描述:
1.实现点击上传图片至接口1,接口已返回处理后的图片id,path等信息
2.限制上传图片的大小,超过大小进行提示并且取消上传
3.限制上传图片的数量
4.将接口返回的参数和另外的参数传给接口2进行提交
5.默认或已有图片加载显示,预览大图
6.删除图片
常见问题:
1.单个上传图片接口失败
上传时请求头不要加//'content-type'
2.图片预览失败
需要回显的图片,文件格式要至少满足上传到u-upload里的默认文件格式。
UviewUI设计里的u-upload的file格式如下:
所以,特别要注意,thumb和url需要是Blob形式,不然会回显失败
3.在PC端调试正常,APP端上传图片一直在上传中不调用接口
uni.uploadFile({
url: upUrl //需要时完整的带根路径的url,baseURL+接口
});
如还有问题看一下上传时请求头不要加//'content-type',加上Authorization: uni.getStorageSync("token"),
代码:
<view style="padding-bottom:20px;font-weight: bold;">上传图片:</view>
<view>
<u-upload
@oversize="oversize"
:fileList="fileA"
@afterRead="afterRead"
@delete="delete"
accept="image"//上传文件类型
name="1"
multiple // true 时, file 为数组格式,否则为对象格式
:maxCount="3"//限制图片个数
:maxSize="4*1024*1024"//限制图片的大小 单位byte 此为4MB
:previewFullImage="true"//是否开启预览大图
></u-upload>
<view>最多上传3张图片,大小不超过4M</view>
</view>
<view class="foot">
<view v-if="overFlag = 0" @click="submit"
>确定</view
>
</view>
接下来是data的定义:
data() {
return {
fileA: [],
fileB: [],
fileC: [],
overFlag: 0,
};
},
对应的函数:
上传:
//图片超过大小时取消上传
oversize(e) {
this.$u.toast("请传4MB以内大小的图片!");
return false;
},
// 上传图片
async afterRead(event) {
this.overFlag = 1;
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.receiptFile(lists[i].url);
let a = result.data;
let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice(
fileListLen,
1,
Object.assign(item, {
status: "success",
message: "",
url: lists[i].url,
imgId:a.data.imgId,
path:a.data.path,
})
);
fileListLen++;
}
this.overFlag = 0;
},
//上传图片时请求接口获得处理过的图片信息
receiptFile(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: upUrl //后端地址,
filePath: url //带过来的参数url,
name: "file",
formData: {
id:"1",
},
//自定义请求头
header: {
//这里不要加'content-type'
Authorization: uni.getStorageSync("token"),
},
success: (res) => {
let data = JSON.parse(res.data);
resolve(data);
},
});
});
},
预览和删除:
注意要展示的图片,文件格式和上传到u-upload里的文件格式要一样。
UviewUI设计里的u-upload的file格式如下:
所以,特别要注意,thumb和url需要是Blob形式,不然会回显失败
//获得已有的图片并回显
getOldFile() {
let params = { id: "1" };
uni
.post({
url: url,
data: params,
})
.then((res) => {
if (res.code == "0") {
let oldfile = res.data.oldFile;
oldfile.forEach((item) => {
this.fileC.push({
imgId: item.imgId,
path:item.path,
type: "image",
name: item.name + "." + item.type,
url: item.url,//需要是blob形式
thumb: item.url,//需要是blob形式
status: "uploading",
message: "加载中...",
});
});
}
});
for (let i = 0; i < this.fileC.length; i++) {
this.fileA.splice(
i,
1,
Object.assign(item, {
...this.fileC[i],
status: "success",
message: "",
})
);
}
},
// 删除图片
delete(event) {
let params = {
imgId:this.fileA[event.index].imgId;
path:this.fileA[event.index].path;
}
uni
.get({
url: url,
data:params,
})
.then((res) => {
if (res.code == "0") {
uni.showToast({
title: '删除成功',
icon: "none",
});
}
});
}
this[`fileList${event.name}`].splice(event.index, 1);
},
提交:
submit() {
this.fileB = this.fileA
let params = {
id:"1",
fileList: this.fileB,
//有其他要一起上传的参数写在这里
};
uni
.post({
url: url,
data: params,
})
.then((res) => {
if (res.code == "0") {
this.fileA = [];
this.fileB = [];
this.fileC = [];
uni.showToast({
title: '图片已提交!',
icon: "none",
});
}
});
},