图片上传

<template>

  <div id="pic_upload">

    <!-- 图片预览 -->

    <!-- <el-dialog custom-class="img_preview" :visible.sync="previewShow" :show-close="false" @close="$emit('close')">

      <div> <img :src="imgUrl"> </div>

    </el-dialog> -->

  </div>

</template>

 

<script>

export default {

  name: "fileUpload",

  props:{

    file : {

      default : {}

    },

    imgUrl : {

      type : String,

      default : ''

    },

  },

  data() {

    return {

      previewShow : false,

    };

  },

  watch : {

    file : {

      handler : function (val) {

        // this.imgCompress(val)

        this.fileChanges(val)

      },

      deep : true

    },

    imgUrl (val, old){

      this.previewShow = !!val

    }

  },

  methods: {

    // 文件上传后

    fileChanges(file) {

      // 压缩图片

      // this.imgCompress(file)

      // 请求七牛 token

      this.axios.get("/weChat/qiniu/token")

      .then(response => {

        let token = response.data.data

        //上传七牛

        this.uploading(token, file)

        return

      });

    },

    //图片上传

    uploading(token, e) {

      if(e.target.files.length) {

        for (let i=0; i<e.target.files.length; i++) {

          let file = e.target.files[i];

          let param = new FormData(); //创建form对象

 

            param.append("chunk", "0"); //断点传输

            param.append("chunks", "1");

            param.append("file", file, file.name);

            param.append("token", token);

            let config = {

              headers: {

                "Content-Type": "multipart/form-data",

              }

            };

            let url = "https://upload-z1.qiniup.com/"

 

            this.axios.post(url, param, config)

            .then(response => {

            //  统一前缀地址：http://qiniu.tianyalei.com

              // if (response.statusText != "OK") {

              //   return;

              // }

              console.log("文件上传成功");

              let data = {

                // url : "https://cdn.youjiajk.com/" + response.data.key + '?fileView2/0/w/800',

                url : "https://cdn.youjiajk.com/" + response.data.key + '?fileView2/0/w/800',

                name : file.name

              }

              this.$emit('filedata', data)

            })

            .catch(err => {

              alert("上传文件错误,请重新上传");

              console.log(err)

              // this.$emit('FailReason', data)

            });

        }

      }

    },

  }

};

</script>

<style lang="less" scope>

 

  .img_preview .el-dialog__body {

    padding: 0px !important;

  }

  .img_preview img {

    width: 100%;

    height: auto;

  }

</style>

 

      files: "", //要上传的文件

        <fileUpload :file="files" @filedata="filedata"></fileUpload>

    filedata(val) {

      // console.log(val);

      this.fileUrl = val.url;

      this.$message.success("上传成功");

 

    },