vue 上傳圖片aliossupload 插件使用

<el-row :gutter="20">
  <el-col :span="2">
    <div class="grid-content"><span class="text-justify goodsImg_title">商品圖片</span></div>
  </el-col>
  <div class="div-inline uploadImg_box">
    <upload-img :isInvert="false" :maxLimit="5" fileName="goods" @uploadSuccess="uploadSuccess"></upload-img>
  </div>
  <span class="uploadImg_tip">請上傳圖片，最多上傳5張</span>
</el-row>

<script>
import uploadImg from 'components/aliossupload'//上傳圖片組件
uploadSuccess($val) {
  console.log($val.fileName);
  this.ruleForm.goodsImgs = $val.fileName.join(",");
  console.log(this.ruleForm.goodsImgs);
}
</script>

 

 

 

 

<!--
圖片上傳
使用：<upload-img :imgMenu="depositImgSelf" :isInvert="true" :maxLimit="3" fileName="combo" @uploadSuccess="uploadDepositImgSuccess"></upload-img>
注意：（1）:imgMenu="depositImgSelf"中的depositImgSelf需要是父組件中自定義的變量，用來接后台返回的圖片數組【不能直接將后台返回的數組圖片放上去】
      （2）:isInvert="true",表示是否返現后台傳過來的圖片，一般用於編輯頁面需要數據回顯時
          調用接口成功以后回顯時的數據處理：
          //保證金匯款證明掃描件回顯
          let depositImgMenu = [];
          this.depositImgSelf.forEach((item, index, arr) => {
            let imgd = item.split("/");
            depositImgMenu.push(imgd[imgd.length - 1])
          })
          //this.goodsDetai.depositImgList中的depositImgList為后台返回的字段名
          this.goodsDetai.depositImgList = depositImgMenu;
          console.log("depositImgMenu:",depositImgMenu)
      （3）:maxLimit="3"限制上傳多少張圖片
      （4）fileName="combo"中的combo是根據后台返回的圖片路徑中的為准，例如http://img.yunzhenshi.com/lzxk/develop/combo/1541742647007.jpg中fileName為combo，而http://img.yunzhenshi.com/lzxk/develop/goods/1541402021731.jpg中的fileName為goods
      （5）@uploadSuccess中方法：
        uploadDepositImgSuccess($val) {
          console.log("保證金匯款證明掃描件$val:",$val)
          //this.goodsDetai.depositImgList中的depositImgList為后台返回的字段名
          this.goodsDetai.depositImgList = $val.fileName;
        }
-->
<template>
  <div>
    <el-upload
      ref="uploadImg"
      :action="actionUrl"
      list-type="picture-card"
      multiple
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeAvatarUpload"
      :http-request="upqiniu"
      :file-list="imglist"
      :on-change="uploadImgChange"
      :on-remove="handleRemove"
      :on-exceed="handleExceed">
      <!--<el-button slot="trigger" size="small" type="primary"><i class="el-icon-plus"></i></el-button>-->
      <div class="uploadBtn" v-show="uploadDisabled"><i class="el-icon-plus"></i></div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body='true'>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {getStore, getAliOssUrl} from 'src/config/cache'

  export default {
    props: {
      imgMenu: {//反顯圖片集合
        type: Array
      },
      maxLimit: {//圖片上傳上限
        type: Number,
        default: 5
      },
      isInvert: {//是否反顯
        type: Boolean
      },
      fileName: {//上傳文件名----拼到上傳路徑
        type: String
      },
      uploadImg_A: {//上傳文件名----拼到上傳路徑
        type: Number
      }

    },
    data() {
      return {
        limit: this.$props.maxLimit,//圖片上傳上限
        AliOssUrlist: [], //簽名等上傳憑證
        actionUrl: '',  //上傳路徑
        fileUrl: '',//
        dialogImageUrl: '', //圖片放大路徑
        dialogVisible: false,//圖片放大  彈窗隱藏
        uploadDisabled: true,//上傳按鈕是否顯示，是否達到上傳上限
        imglist: [],//展示圖片集合
        imglistName: [],//需要傳到后台圖片名字集合
      };
    },
    created() {
      this.init()
    },
    computed: {},
    watch: {
      imgMenu(val) {
        if (this.$props.isInvert == true) {//是否需要反顯，需要反顯展示相關圖片
          val.forEach((item, index, arr) => {
         // console.log("是否需要反顯，需要反顯展示相關圖片:",item);
            this.imglist.push({url: item});
          });
        }
        if(val.length>=this.limit){
          this.uploadDisabled=false;
        }
      },
      uploadImg_A(){
        this.$refs.uploadImg.clearFiles();
      }

    },
    methods: {
      init() {
     console.log('上傳憑證：',this.$props, getStore('AliOssUrlist'));
        if (getStore('AliOssUrlist')) {//獲取緩存中的阿里上傳憑證---獲取不到重新向后台發送請求
          this.AliOssUrlist = JSON.parse(getStore('AliOssUrlist'));
          this.fileUrl = this.AliOssUrlist.aliOssDir + this.$props.fileName + '/';
        } else {
          this.AliOssUrlist = getAliOssUrl();
        }
      },
      funcUrlDel(url,paramKey){//刪除上傳圖片成功以后圖片url參數並返回不帶參數的url
        if(url.indexOf("?")!="-1"){
          var urlParam = url.substr(url.indexOf("?")+1);
          var beforeUrl = url.substr(0,url.indexOf("?"));
          var nextUrl = "";

          var arr = new Array();
          if(urlParam!=""){
            var urlParamArr = urlParam.split("&");

            for(var i=0;i<urlParamArr.length;i++){
              var paramArr = urlParamArr[i].split("=");
              if(paramArr[0]!=paramKey){
                arr.push(urlParamArr[i]);
              }
            }
          }

          if(arr.length>0){
            nextUrl = "?"+arr.join("&");
          }
          url = beforeUrl+nextUrl;
          return url;
        }else{
          return url;
        }
      },
      upqiniu(req) {//上傳到阿里----達到上限時隱藏上傳彈窗；
        let OSS = require('ali-oss').Wrapper;
        let client = new OSS({
          region: this.AliOssUrlist.ossRegion,
          accessKeyId: this.AliOssUrlist.ossKey,
          accessKeySecret: this.AliOssUrlist.ossSecret,
          bucket: this.AliOssUrlist.ossBucket
        });
        client.multipartUpload(this.actionUrl, req.file).then(res => {});
      },
      uploadImgChange(file, fileList){//文件上傳
        console.log('文件上傳file',file);
        console.log('文件上傳fileList',fileList);
        var imgtype = file.name.toLowerCase().split('.');

        let arr1=[];
        fileList.forEach(function(item){
          if(item.status=='success'){
            let path=item.url;
            let filename='';//從路徑中截取圖片名[包括后綴名]
            if(path.indexOf("/")>0){//如果包含有"/"號 從最后一個"/"號+1的位置開始截取字符串
              filename=path.substring(path.lastIndexOf("/")+1,path.length);
            }else{
              filename=path;
            }
            arr1.push(filename);
          }else{
            arr1.push(item.uid+'.'+imgtype[1]);
          }
        });
        if(fileList.length>=0){
          this.uploadDisabled=true;
        }
        if(fileList.length>=this.limit){
          this.uploadDisabled=false;
        }
        this.$emit('uploadSuccess', {fileName: arr1});
      },
      removeByValue(arr, val) {//刪除數組中指定元素
        for(var i=0; i<arr.length; i++) {
          if(arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
        return arr;
      },
      handleRemove(file, fileList) {//刪除圖片
        console.log('刪除圖片file',file);
        console.log('刪除圖片fileList',fileList);
        let arr1=[];
        fileList.forEach(function(item,index){
          console.log("item.url:"+index+":",item.url)
          let path=item.url;
          let filename='';//從路徑中截取圖片名[包括后綴名]
          if(path.indexOf("/")>0){//如果包含有"/"號 從最后一個"/"號+1的位置開始截取字符串
            filename=path.substring(path.lastIndexOf("/")+1,path.length);
          }else{
            filename=path;
          }
          arr1.push(filename);
        });
        if(fileList.length>=0){
          this.uploadDisabled=true;
        }
        if(fileList.length>=this.limit){
          this.uploadDisabled=false;
        }
        this.$emit('uploadSuccess', {fileName: arr1});
      },
      handleExceed(files, fileList) {
        this.$message.warning(`當前限制選擇 5 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
      },
      handlePictureCardPreview(file) {//放大圖片
        this.dialogImageUrl = file.url;
        console.log(this.dialogImageUrl)
        this.dialogVisible = true;
      },

      beforeAvatarUpload(file) {// 圖片長傳-之前校驗
        console.log("file:",file)
        this.showNoticeUploading = true
        let type = file.name.split('.')[1];
        this.actionUrl = this.fileUrl + file.uid + '.' + type;
        console.log(this.actionUrl);
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 10;
        // if (!isJPG) {
        //   this.$message.error('上傳頭像圖片只能是 JPG 格式!')
        //   return
        // }
        if (!isLt2M) {
          this.$message.error('上傳頭像圖片大小不能超過 10MB!')
          return
        }
      }

    }
  };
</script>
<style type="text/css">
  .oss_file {
    height: 100px;
    width: 100%;

  }

  .oss_file input {
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .el-upload--picture-card {
    width: auto;
    height: auto;
    border: none;
  }
  .el-upload {
    /*display:none!important;*/

  }

  .uploadBtn{
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    outline: 0;
  }
</style>