uniapp 使用 uni-file-picker 上传图片至服务器。

<template>
    <uni-file-picker
              v-model="afterImageValueArr"
              fileMediatype="image"
              mode="grid"
              @select="handleSelectImg"
              @delete="handleDeleteImg"
              limit="9"
              title="最多选择9张图片"
      ></uni-file-picker>
</template>
<script>
	export default {
    	data() {
			return {
			  afterImageValueArr: [], 
			}
		}
		methods: {
			handleSelectImg(res) {
				console.log(res.tempFilePaths, "点击上传图片-e---tempFilePaths 数组")
				// 图片上传后,拿到临时文件路径,用uni.uploadFile方法上传
				const p = new Promise((resolve, reject) => {
					uni.showLoading({
						title: this.$t('beuploading')
					});
					// 执行异步和同步代码
					uni.uploadFile({
						url: "/api/file-upload",
						name: "file",
						filePath: res.tempFilePaths[0],
						success: (res) => {
							// 状态码为200,说明上传成功了
							const urlData = JSON.parse(res.data)
							resolve(urlData)
							uni.hideLoading();
						},
						fail: (error) => {
							reject(error)
							uni.hideLoading();
						},
					})
				})
				p.then((res) => {
					console.log("promise的实例对象-then", res)
					this.afterImageValueArr.push({
						url: res.fileUrl,
						extname: "",
						name: res.filePath,
					})
					console.log(this.afterImageValueArr)
				}).catch((error) => {
					console.log(error, "error 错误信息")
				})
			},

			handleDeleteImg(e) {
				const deleteItemName = e.tempFile.name
				// 根据名字找下标
				const index = this.afterImageValueArr.findIndex((item) => {
					if (item.path) {
						console.log("进入本地")
						return item.url === e.tempFilePath
					}
					const one = item.name.split("_")
					// console.log(one, " one 图片名字")
					const two = one[1].split(".")
					// console.log(two, "two 图片名字")
					const wwwcc = one[0] + "." + two[1]
					console.log(wwwcc , "=== wwwcc 图片名字")
					// console.log(item.name, "<<<=== item.name 查询名字")
					// console.log(deleteItemName, "<<<=== deleteItemName 删除的图片地址名字")
					return wwwcc === deleteItemName
				})
				console.log(index, "<<<=== index 删除的图片下标")
				this.afterImageValueArr.splice(index, 1)
				console.log(
					this.afterImageValueArr,
					"<<<=== afterImageValueArr  图片数组-----------> 根据index 删除后2",
				)
			},
       }
    }
</script>