uniapp中图片上传小结

使用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>

三、效果

效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容