uniapp+uviewUI 实现上传图片功能up-upload
官网：https://uview-plus.jiangruyi.com/components/upload.html#api
方式一：非自动上传
<!-- * @Descripttion: 图片上传: UploadPicture 非自动上传 --> <template> <up-upload :fileList="fileList" multiple @afterRead="afterRead" @delete="deletePic" :maxCount="2" ></up-upload> </template> <script setup> import { requestPromiseAPI } from '@/help'; import { uploadAPI } from '@/api/common'; const max = ref(2); const fileList = ref([]); // 数据操作后赋值 const setKeyInfo = () => { const urlString = fileList.value.map((item) => item.url).join(', '); }; // 删除图片 const deletePic = (event) => { fileList.value.splice(event.index, 1); setKeyInfo(); }; // 新增图片 const afterRead = (event) => { // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 const files = Array.isArray(event.file) ? event.file : [event.file]; const currentFileListLength = fileList.value.length; // 检查是否超过最大上传数量 if (maxCount.value < files.length + currentFileListLength) { return uni.$u.toast(`最多上传${maxCount.value}张图片`); } // 临时存储新添加的文件（带上传中状态） const newFiles = files.map((file) => ({ ...file, status: 'uploading', message: '上传中', })); // 合并到 fileList（先添加所有文件，再逐个更新状态） fileList.value = [...fileList.value, ...newFiles]; // 遍历上传每个文件 files.forEach(async (formData, index) => { const fileIndex = currentFileListLength + index; // 新文件在 fileList 中的索引 const params = { params: { type: 'VIDEO_IMG', }, formData, }; // 使用通用图片上传接口，如要当前可以调用uploadAPI_MORG const { msg, data, isOK } = await requestPromiseAPI(uploadAPI, params); if (isOK) { fileList.value[fileIndex] = { ...fileList.value[fileIndex], status: 'success', message: '', url: data, }; setKeyInfo(); } else { uni.$u.toast(msg); } }); }; </script>方式二：自动上传
<!-- * @Descripttion: 图片上传: UploadPicture --> <template> <up-upload autoUpload :autoUploadApi="autoUploadApi" :autoUploadHeader="{ auth: getToken(), }" :fileList="fileList" customAfterAutoUpload @afterAutoUpload="afterAutoUpload" @delete="deletePic" :maxCount="maxCount" ></up-upload> </template> <script setup> import { uploadFileAPI } from '@/help'; import { getToken } from '@/utils'; //直接拿到后端api，组件自动处理参数，无需自主处理 const autoUploadApi = ref(uploadFileAPI()); const fileList = ref([]); const maxCount = ref(2); // 数据操作后赋值 const setKeyInfo = () => { const urlString = fileList.value.map((item) => item.url).join(','); }; // 上传后处理逻辑配合 const afterAutoUpload = (res) => { const jsonStr = res.toString(); // 转换为普通字符串 const { data } = JSON.parse(jsonStr); // 防止赋值不一致，必须multiple是false，除非返回特殊区别的状态，否则multiple是true只能非自动上传处理逻辑 fileList.value.at(-1).url = data; setKeyInfo(); }; // 删除图片 const deletePic = (event) => { fileList.value.splice(event.index, 1); setKeyInfo(); }; </script>