使用uniapp做图片上传的时候，可以采用uView的upload组件来做，组件里面已经封装好一些方法，用起来还是挺方便的。具体用法详见uView官方文档
一、组件参数解释
//主要用到的参数解释(自动上传)
<u-upload
ref="uImageUpload" //定义ref之后可以使用ref调用组件内置方法
name="files[]" //上传文件的字段名，供后端获取使用
:action="uploadApiUrl" //上传的接口地址
:header="headers" //上传的头信息设置
:form-data="formData" //上传额外可以携带的参数
:show-progress="false" //是否显示进度条
:max-count="3" //最大允许的上传的图片数量
:max-size="200 * 1024 * 1024" //单个图片允许上传的大小限制
@on-change="finishUpload" //上传完成之后的回调
@on-remove="removePic" //删除图片的回调
></u-upload>
二、整体用法（以一个简化版的图片上传组件为例）
<template>
<view class="form-field-wrap">
<view class="upload-wrap">
<u-upload
ref="uImageUpload"
name="files[]"
:action="uploadApiUrl"
:header="headers"
:form-data="formData"
:show-progress="false"
:max-count="itemObj.pic_upload_max_num"
:max-size="itemObj.pic_max_limit_size * 1024 * 1024"
@on-change="finishUpload"
@on-remove="removePic"
></u-upload>
</view>
</view>
</template>
<script>
//导入获取头信息的方法
import { getAccessApiHeaders } from "../../../common/services/http";
export default {
name: "uploadPic",
props: {
//用户传入的设置对象
itemObj: {
type: Object,
default() {
return {};
},
},
},
data() {
return {
//上传接口地址
uploadApiUrl: "",
//头信息
headers: {},
//上传额外携带的参数
formData: {},
};
},
created() {
//设置上传接口地址
this.uploadApiUrl = this.$api.getUploadFileUrl();
//设置请求头
this.headers = getAccessApiHeaders();
//设置form-data
this.formData.module_id = 123;
},
methods: {
//完成上传
finishUpload(res, index, imageList) {
//上传完成后做的一些操作
},
//删除图片
removePic(index, imageList) {
//删除一张图片后可以做一些操作
},
},
};
</script>
<style lang="scss">
.form-field-wrap {
.field-lable-title {
font-size: 30rpx;
font-weight: 500;
color: #ffffff;
}
.upload-wrap {
background: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
}
}
</style>
三、效果
效果图
