uniapp使用uview2上传图片功能
官网地址Upload 上传 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
前提,需要下载vuew2插件
<view class="upload">
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload :fileList="scoreFileList" @afterRead="afterRead" @delete="deletePic"
multiple :maxCount="9" :previewFullImage="true"></u-upload>
</view>
</view>
</view>
data {
scoreFileList: []
}
deletePic(event) {
this.scoreFileList.splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file);
let fileListLen = this.scoreFileList.length;
lists.map((item) => {
this.scoreFileList.push({
...item,
status: "uploading",
message: "上传中",
});
});
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url);
let item = this.scoreFileList[fileListLen];
this.scoreFileList.splice(
fileListLen,
1,
Object.assign(item, {
status: "success",
message: "",
url: result,
})
);
fileListLen++;
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'http://www.example.com/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: "file",
success: (uploadFileRes) => {
let res = JSON.parse(uploadFileRes.data);
resolve(res.message);
},
fail: (err) => {
console.log(err);
},
});
});
},
获取图片地址,数组形式
["4213.png", "6816.png"]
let detai_thumbs = this.scoreFileList.map((item) => item.url);