首页 / VUE / vue项目中使用element ui上传图片到七牛

vue项目中使用element ui上传图片到七牛

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue项目中使用element ui上传图片到七牛，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2788字，纯文字阅读大概需要4分钟。

内容图文

1.获取token值

后台有接口调用直接返回token值

            //
            请求后台拿七牛云token
    async getQiniuToken() {  //token
      let uploadtoken = await 
      this.Fetch("/osg/resource/uploadtoken/image", {
        method: "get",
      });
      console.log(uploadtoken);
        //赋值保存在本地this.QiniuData.token= uploadtoken.data.token   
    },

2.贴上页面代码

<template>
  <div class="upload-info">
    <div>
      <el-upload
          class="upload-pic"
          :action="domain"
          :data="QiniuData"
          :on-remove="handleRemove"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :before-remove="beforeRemove"
          :before-upload="beforeAvatarUpload"
          :limit="3"
          multiple
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
        <el-button size="small" type="primary">选择图片</el-button>
      </el-upload>
      <div>
        <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
      </div>
    </div>
    <div>
      <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      <el-button type="info" plain >取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      QiniuData: {
        key: "", //图片名字处理
        token: "" ,//七牛云token        data:{}
      },
      domain: "http://upload.qiniup.com", // 七牛云的上传地址（华东区）
      qiniuaddr: "http://image.********.cn", // 七牛云的图片外链地址 七牛云空间的外链地址
      uploadPicUrl: "", //提交到后台图片地址      fileList: []
    };
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    handleRemove(file, fileList) {
      this.uploadPicUrl = "";
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 张图片，如需更换，请删除上一张图片在重新选择！`
      );
    },
    beforeAvatarUpload(file) {   //图片上传之前的方法
      // const isPNG = file.type === "image/png";// const isJPEG = file.type === "image/jpeg";// const isJPG = file.type === "image/jpg";// const isLt2M = file.size / 1024 / 1024 < 2;// if (!isPNG && !isJPEG && !isJPG) {//   this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");//   return false;// }// if (!isLt2M) {//   this.$message.error("上传头像图片大小不能超过 2MB!");//   return false;// }this.QiniuData.data = file;
      this.QiniuData.key = `${file.name}`;
      console.log(this.QiniuData.key)
    },
    uploadSuccess(response, file, fileList) {  //图片上传成功的方法
      console.log(fileList);
      console.log(response);
      console.log(file);
      this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
    },
    uploadError(err, file, fileList) {    //图片上传失败时调用
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      });
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${ file.name }？`);    },
    //提交数据到后台    handleSubmit() {
      
    },
    //请求后台拿七牛云token
    async getQiniuToken() {  //token
      let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {
        method: "get",
      });
      console.log(uploadtoken);
     this.QiniuData.token= uploadtoken.data.token
    },
  }
};
</script>

3.起初也是毫无头绪，看文档，看博客，如有雷同，纯属借鉴！

原文：https://www.cnblogs.com/cb1490838281/p/12377759.html

内容总结

以上是互联网集市为您收集整理的vue项目中使用element ui上传图片到七牛全部内容，希望文章能够帮你解决vue项目中使用element ui上传图片到七牛所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1230792.html

来源：【匿名】