1、使用vant中的van-upload
组件进行图片上传,部分api属性见下表
属性名 | 定义 |
---|---|
upload-text | 上传区域文字提示 |
upload-icon | 上传区域图标名称或图片链接,等同于 Icon 组件的name属性 |
max-count | 最大上传图片数量 |
max-size | 最大上传容量 |
after-read | 文件读取完成后的回调函数 |
@delete | 删除文件预览时触发事件 |
v-model | 双向绑定,数组 |
2、定义接口
export const uploadImage = (file: File) => {
const fd = new FormData()
fd.append('file', file)
return request<Image>('/upload', 'POST', fd)
}
此处接口需要请求的数据为FormData
格式,在函数中使用new构造一个FormData
的对象,再通过append方法将传入过来的file(类型为File的图片)推入FormData
中,发送请求。
3、页面中调用
<van-uploader
:after-read="onAfterRead"
@delete="onDeleteImg"
v-model="fileList"
max-count="9"
:max-size="5 * 1024 * 1024"
upload-icon="photo-o"
upload-text="上传图片"
></van-uploader>
import { uploadImage } from '@/services/img'
//item是回调函数的file对象
const onAfterRead = (item) => {
//不支持多选,只能一张一张选择
if (Array.isArray(item)) return
//如果没有选择,直接返回
if (!item.file) return
// 开始上传
item.status = 'uploading'
item.message = '上传中...'
uploadImage(item.file)
.then((res) => {
item.status = 'done'
item.message = undefined
item.url = res.data.url
form.value.pictures?.push(res.data)
})
.catch(() => {
item.status = 'failed'
item.message = '上传失败'
})
}
4、删除图片
const onDeleteImg = (item: UploaderFileListItem) => {
form.value.pictures = form.value.pictures?.filter((pic) => pic.url !== item.url)
}
//使用filter删除数组中的图片,此处仅为前端的简单删除