官网地址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);