图片上传测试

<template>
  <div class="upload">
    <el-upload
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :action="domain"
      :http-request='upqiniu'
      :auto-upload="false"
      ref="images"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-button @click="SubmitImages">上传图片</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    allUpload:false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      token: {},
      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
      domain: "https://upload-z2.qiniup.com",
      // 这是七牛云空间的外链默认域名
      qiniuaddr: "q8ekm0dym.bkt.clouddn.com"
    };
  },
  methods: {
    // 上传文件到七牛云
    upqiniu(req) {
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let filetype = "";
      if (req.file.type === "image/png") {
        filetype = "png";
      } else {
        filetype = "jpg";
      }
      // 重命名要上传的文件
      const keyname =
        "foreveruploadimgs" +
        new Date() +
        Math.floor(Math.random() * 100) +
        "." +
        filetype;
      // 从后端获取上传凭证token
      const formdata = new FormData();
      formdata.append("file", req.file);
      formdata.append("token", "cRDVNHsJxqpUZoq3xzYy6jvHG8fHKeNS88-3Q4Po:66Yej5M85hmLdXJiinmwE3fDcjo=:eyJzY29wZSI6ImZvcmV2ZXJ1cGxvYWRpbWdzIiwiZGVhZGxpbmUiOjE1ODY5NDI0Njd9");
      formdata.append("key", keyname);
      // 获取到凭证之后再将文件上传到七牛云空间
      this.axios.post(this.domain, formdata, config).then(res => {
        // res.data.key 返回的文件名
        this.imageUrl = "http://" + this.qiniuaddr + "/" + res.data.key;
        console.log(this.imageUrl)
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {//放大图片
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    SubmitImages(){//图片统一上传
      this.$refs.images.submit();
    },
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-upload.el-upload--picture-card{
  width: 68px;
  height: 68px;
  position: relative;
}
/deep/ .el-icon-plus{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/deep/ .el-upload-list__item.is-ready{
  width: 68px;
  height: 68px;
  img{
    width: 100%;
    height: 100%;
    vertical-align: bottom;
  }
}
</style>