使用uniapp和uview上传图片，预览和删除都可以

之前写过一个使用uniapp和uview上传图片功能，项目测试时用的那个，是可以上传成功的，但是有点问题，代码优化后把现在的贴出来，感觉比之前那个好用（中配）

优化PLUS版：可以从我的资源处下载依赖免费的，文件中引入，预览方法改为，别的不用改（使用下面的上传组件）

previewImage(logourl) {
        const ctpic = new Ctpic();
        let that = this;
        let res = ctpic.app_URLtoBitmap({
            base64:logourl //base64数据
        })
      }

上传组件，是在插件市场下载的，根据自己需求改了改
<template>
  <view class="imglistbx">
    <view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList" :key='index'>
      <!--该处图片路径指向的是base64图片流-->
      <image :src="item.messageContent" class="itemImg" @click="previewImage(item.messageContent)" mode="aspectFill"></image>
      <icon size="18" type="cancel" class="cancelBtn" @click="deleteImg(item.id,index)" v-if="deleteBtn"></icon>
    </view>
    <!-- 上传控件 -->
    <view :class="['imglistItem',columnNum==3?'column3':'column4']" @click="uploadImg" v-if="showUploadControl">
      <view class="itemImg uploadControl">+</view>
    </view>
    <view class="clear"></view>
	<u-toast ref="uToast" />
  </view>
</template>

<script>
  import { pathToBase64, base64ToPath } from '../../js_sdk/gsq-image-tools/image-tools/index.js'  //该方法主要用于图片回显预览，即点击放大
  export default {
    props: {
      //是否显示上传控件
      control: {
        type: Boolean,
        default: true
      },
      //是否显示上删除按钮
      deleteBtn: {
        type: Boolean,
        default: true
      },
      //行数量 一行显示几个上传图片
      columnNum: {
        type: [Number, String],
        default: 4
      },
	  //上传哪一功能的图片
	  which: {
	    type: [String],
	    default: ""
	  },
      //album 从相册选图，camera 使用相机
      sourceType: {
        type: Array,
        default: function() {
          return ['camera', 'album']
        }
      },
      //最大上传数量
      maxCount: {
        type: [Number, String],
        default: 3
      },
      //服务返回回调的图片数组--回填
      mode: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        imgList: [],
        showList: [],
        showUploadControl: true
      }
    },
    watch: {
      mode(v) {
        this.init(v)
      },
      control(v) {
        this.showUploadControl = v
      },
    },
    created() {
      this.init(this.mode)
    },
    methods: {
      init(v) {
        if (this.mode.length != 0) {
          this.showList = v;
          return
        };
        this.showList = this.imgList;
      },
      // 上传图片
      uploadImg() {
        uni.chooseImage({
          sizeType: ['compressed'],
          sourceType: this.sourceType,
          count: this.maxCount,
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            this.$emit("chooseFile",tempFilePaths[0],this.which)  //调用父组件的方法，区分是哪个上传功能
          }
        });
      },
      //删除图片
      deleteImg(id,eq) {
        let getUrl = this.handleImg();
        uni.showModal({
          title: '提示',
          content: '您确定删除吗？',
          success: (res)=> {
            if (res.confirm) {
             this.$emit("imgDelete", id, this.which,eq); //我的项目有三个上传，参数主要为id，区分是哪个上传
            }
          }
        });
      },
      // 预览图片
      previewImage(logourl) {
		let that = this;
		uni.showLoading({
			title:"图片处理中..."
		})
		base64ToPath(logourl)   //图片流回显使用，性能不太理想
		  .then(path => {
			let imgsArray = [];
			uni.hideLoading()
			imgsArray[0] = path;
			uni.previewImage({
				current: 0,
				urls: imgsArray
			});
		  })
		  .catch(error => {
				that.$refs.uToast.show({
					title: '图片加载失败',
					type: 'warning'
				})
			uni.hideLoading()
		  })
      },
      //返回需要操作的图片数组
      //如果是回调了则操作回填后的数组 否则操作临时路径的图片数组
      handleImg() {
        return this.mode.length > 0 ? this.showList : this.imgList
      }
    }
  }
</script>

<style scoped>
  .imglistbx {
    width: 100%;
    height: 100%;
  }

  .imglistItem {
    position: relative;
    float: left;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }

  .column3 {
    width: 33.3333%;
    height: 160rpx;
  }

  .column4 {
    width: 25%;
    height: 130rpx;
  }

  .itemImg {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 10rpx;
  }

  .cancelBtn {
    position: absolute;
    top: -10rpx;
    right: 10rpx;
  }
  .uploadControl {
    font-size: 50rpx;
    color: #888;
    background-color: #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .clear {
    clear: both;
  }
</style>




父组件，页面中使用，引入后

import gUpload from "../../components/g-upload/g-upload.vue"


<view class="selectItem" v-show="flagLung">
				<g-upload ref='gUpload' :mode="lungList" @chooseFile="chooseFile" @imgDelete='imgDelete' :control='control' :which="lung"
				 :columnNum="columnNum"></g-upload>
			</view>

chooseFile(v,which) {
	this.beforeAvatarUpload(v,which)   //v为文件，自动加的，which区分那个上传，页面可能有多个上传
},

beforeAvatarUpload(file,which) {
	let param = {};
	param.imgType = which;
	param.visitId = uni.getStorageSync("visitorItem").id;
	this.$uploadFile({
		url: '', 
		filePath:file,  //上传的文件
		name:"fileName", //后台接受文件标识
		formData:{ //额外参数
			"param":JSON.stringify(param)
		},
		success: (res) => {
			if (res.data.status == 'SUCCESS') {
				this.$refs.uToast.show({
					title: '上传成功',
					type: 'success'
				})
			} else {
				this.$refs.uToast.show({
					title: '上传失败',
					type: 'error'
				})
			}
		},
		fail: (err) => {
			this.$refs.uToast.show({
				title: '网络出了小差，请稍后重试',
				type: 'error '
			})
		}
	});
},