1、前提：业务需求，最多上传6张图片，并可以实现本地预览
2、解决方法：使用vant组件库中的van-uploader实现
3、代码实现
template
<div class="upload-oss">
<van-uploader
:after-read="onRead"
:before-read="beforeRead"
:accept="fileType"
v-model="fileList"
multiple
:max-count="maxCount"
:max-size="maxSize"
@oversize="onOversize"
>
</van-uploader>
</div>
js实现
import { moment } from '@/common'
const emit = defineEmits(['update:fileList'])
defineProps({
maxCount: { // 图片张数
type: Number,
default: 6
},
maxSize: { // 图片大小
type: Number,
default: 500 * 1024
},
fileType: { // 文件类型
type: String,
default: "image/*"
},
fileList: { //已上传的文件列表
type: Array,
default: (()=>{
return []
})
},
})
// 文件大小超过限制时触发
function onOversize(file){
console.log("请上传小于10M的图片")
}
// 上传前置处理
function beforeRead (file) {
if(Array.isArray(file)) {
file.forEach(item => {
if (item.type !== 'image/jpeg') {
console.log("请上传 image 格式图片")
return false
}
})
if (file.type !== 'image/jpeg') {
console.log("请上传 image 格式图片")
return false
}
}
return true
}
async function onRead(file){
let content = file
let forms = new FormData()
// 判断当前上传几张图，一张以上则为数组结构
if(Array.isArray(content)) {
content.forEach(item => {
forms.append("file",item.file)
forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
})
}else{
forms.append("file", content.file)
forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
}
let res = await axios.post({
、、、、发起后端上传图片接口请求
})
if (res) {
emit("update:fileList", res.data)
}
}
4、实现的效果图
