vue3 uniapp 上传图片

直接上代码

<uni-file-picker fileMediatype="image" @select="selectFile"  @delete="deleteFile"  v-model="data.fileList"></uni-file-picker>
<view class="sub" @click="submit()">提交</view>

<script setup>

const data = reactive({
　　fileList:[]
})

const submit = () => {
　　let list = []
　　if(data.fileList.length){
　　　　data.fileList.forEach(z=>{
　　　　　　if(z.uuid){
　　　　　　　　list.push(z)
　　　　　　}
　　　　})
　　}
　　uploadImages(list)
}

const uploadImages = async imagePaths => {
    for (let item of imagePaths) {
        if(!item.id){
            await uploadImage(item);
        }
    }
    showToast('操作成功')
    setTimeout(() => {
            uni.redirectTo({ url :`/pages/xxx`})
        }, 500)
}

 

const uploadImage =(item) =>{
　　return new Promise((resolve, reject) => {
　　// 这里是上传图片的代码，比如使用uniapp的uni.uploadFile
　　uni.uploadFile({
　　　　url: process.env.VUE_APP_BASE_URL + '/resource/oss/endpoint-biz/put-file-attach',
　　　　filePath: item.url,
　　　　name: 'file',
　　　　formData: {
　　　　　　sourceId: data.sourceId,
　　　　　　sourceType: 5,
　　　　　　files: item.url
　　　　},
　　　　header: {
　　　　　　'content-type': 'multipart/form-data',
　　　　　　Authorization: `Bearer ${uni.getStorageSync('access_token')}`,
　　　　　　'Tenant-Id': uni.getStorageSync('Tenant-Id'),
　　　　},
　　　　success: (uploadFileRes) => {
　　　　　　resolve(uploadFileRes);
　　　　},
　　　　fail: (error) => {
　　　　　　reject(error);
　　　　　　}
　　　　});
　　});
}

//选择上传
const selectFile = e => {
　　data.uploadStatus = true //如果有新的上传更改下状态（可能编辑图片）
　　if(!data.fileList.length){
　　　　data.fileList = e.tempFiles
　　}else {
　　　　data.fileList = [...data.fileList, ...e.tempFiles];
　　}
}
//删除
const deleteFile = e => {
　　const num = data.fileList.findIndex(v=> v.url == e.tempFilePath);
　　data.deletePath.push(e.tempFilePath)
　　data.fileList.splice(num, 1);
}

</script>