精华内容
下载资源
问答
  • 文章目录前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云Vue上传图片到七牛云Django上传图片到七牛云 在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越...

    前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云


    在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处采用七牛云进行图片存储。

    经过测试,通过七牛云获取图片确实比直接通过自己的服务器获取的速度要快得多,赶快去注册七牛云吧。

    上传方式
    上传图片的方式有两种:

    1 .通过服务器:将文件传到服务端,由服务端上传到七牛云
    在这里插入图片描述

    2 .通过前端JS:将文件直接从JS上传到七牛云。

    在这里插入图片描述

    3 .两种方式都可以完成上传,但是前者还需占用服务端的带宽来上传文件,然后再由服务端上传;而后者仅占用客户端的资源,这样可以减轻服务端的压力。

    Vue上传图片到七牛云

    <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
          },
          domain: "https://upload-z2.qiniup.com", // 七牛云的上传地址(华南区)
          qiniuaddr: "http://xxxx.com", // 七牛云的图片外链地址
          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.key = `upload_pic_${file.name}`;
        },
        uploadSuccess(response, file, fileList) {
          console.log(fileList);
          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() {
          let ajaxData = {
            receipt_img: this.uploadPicUrl //图片地址
          };
          this.$http.put("/xxx", ajaxData)
            .then(response => {
              let { code, data } = response.data;
              if (code == "0") {
                this.$message({
                  message: "提交成功!",
                  type: "success",
                  center: true
                });
              }
            })
            .catch(error => {
              this.$message({
                message: error.msg,
                type: "error",
                center: true
              });
            });
        },
        //请求后台拿七牛云token
        getQiniuToken() {
          this.$http.get("/xxx")
            .then(response => {
              let { code, data } = response.data;
              if (code == "0") {
                this.QiniuData.token = data;
              }
            })
            .catch(error => {});
        }
      }
    };
    </script>
    
    
    

    Django上传图片到七牛云

    1. 安装七牛云的SDK
     pip install qiniu
    
    1. Django项目中的配置
    QINIU_ACCESS_KEY = '你的七牛云access_key'
    QINIU_SECRET_KEY = '你的七牛云secert_key'
    QINIU_BUCKET_NAME = '你的bucket_name'
    

    3 .上传文件

    import io
    import uuid
    
    import qiniu
    from PIL import Image
    from django.conf import settings
    
    q = qiniu.Auth(settings.QINIU_ACCESS_KEY, settings.QINIU_SECRET_KEY)
    
    def upload(img):
        _img = img.read()
        size = len(_img) / (1024 * 1024)  # 上传图片的大小 M单位
        
        image = Image.open(io.BytesIO(_img))
        
        key = str(uuid.uuid1()).replace('-', '')
    
        name = 'upfile.{0}'.format(image.format)  # 获取图片后缀(图片格式)
       
        if size > 1:
            # 压缩
            x, y = image.size
            im = image.resize((int(x / 1.73), int(y / 1.73)), Image.ANTIALIAS) #等比例压缩 1.73 倍
        else:
            # 不压缩
            im = image
        
        im.save('./media/' + name)  # 在根目录有个media文件
        path = './media/' + name
        
        token = q.upload_token(settings.QINIU_BUCKET_NAME, key, 3600,)
        
        qiniu.put_file(token, key, path)
        url = 'http://7u2iif.com1.z0.glb.clouddn.com/{}'.format(key)
        return url
    
    
    
    

    4.视图

    from web.uploadpic import upload
    
    def uploadpic(request):
        img = request.FILES['file']
        url = upload(img)
        return HttpResponse(url)
    
    
    
    展开全文
  • vue <template> <div class="imgContainer"> <img :src="userlog.log || defaultlog" id="userlog" alt=""> <div class="icon-a"> <span v-show="flag">编辑头像<...

    后台(我用的是django框架,flask框架于此类似)
    注意:
    1.django(默认是8000)与vue的端口号(一般是8080)不一样会跨域
    可以在setting中设置白名单,可以参考
    2.需要解决django的防csrf
    简单粗暴的方法:可以注释 MIDDLEWARE=[ #‘django.middleware.csrf.CsrfViewMiddleware’,]
    但这样不安全,其他解决方案参考

    import pycharm_study_django.settings as settings#导入配置文件
    from django.http import JsonResponse
    import uuid #用于生成唯一的文件名(即图片名)
    def qiniuupToken(request):
        if request.method == 'POST':
        try:
            # 需要填写你的 Access Key 和 Secret Key
            access_key = '你的七牛云密钥'
            secret_key = '你的七牛云私钥'
            # 构建鉴权对象
            q = Auth(access_key, secret_key)
            # 指定要上传至的七牛云的空间
            bucket_name = '空间名'
            # 取到前端传过来的图片,request.FILES 是类似json:key是html中 input的name,value是文件
            file=request.FILES.get('usericon')
            # usrid=request.POST.get('userid')
            # 上传到七牛后保存的文件名
            keyname = str(uuid.uuid4()) + '.' + file.name.split('.')[1]
            # 生成上传 Token,可以指定过期时间等
            token = q.upload_token(bucket_name, keyname, 3600)
            # # 保存文件到本地服务器,如果不想缓存到本地可以不写
            with open(keyname, 'wb') as fp:
                for c in file.chunks():
                    fp.write(c)
            #  要上传到七牛云的图片名
            localfile = keyname  #文件名
            ret, info = put_file(token, keyname, localfile)
            # print('七牛云存储')
            # print(info)
            assert ret['key'] == keyname
            assert ret['hash'] == etag(localfile)
    
            # # 此处要写加入数据库代码
            src='http://povdy95qx.bkt.clouddn.com/'+keyname #七牛云的图片地址,传给前台并写入数据库
    
            return JsonResponse({"code": "908", "qiniu_token": token,'src':src})
        except Exception as ex:
            print('error-------------------------')
            print(ex)
            return JsonResponse({"code": "408"})
    else:
        return JsonResponse({"code": "408"})
    

    vue

    	<template>
    	  <div class="imgContainer">
    	    <img :src="userlog.log || defaultlog" id="userlog" alt="">
    	    <div class="icon-a">
    	      <span v-show="flag">编辑头像</span>
    	      <span v-show="!flag" class="cancel" @click="clickCancel">取消</span>
    	      <span v-show="!flag" class="save" @click="clickSave" >保存</span>
    	      <form>
    	        <!--不需要让其name为usericon了,因为js中序列化formdata对象时指定了和后台一致的key值了-->
    	        <input type="file" @change="changeLog" accept="image/png,image/gif,image/jpeg" class="chooseImg" name="usericon" multiple>
    	      </form>
    	      <div class="previewDiv">
    	
    	      </div>
    	    </div>
    	
    	  </div>
    	
    	</template>
    	
    	<script>
    	  // npm install qiniu-js
    	    import axios from 'axios'
    	    import qiniu from 'qiniu-js'
    	    export default {
    	        props:{		//父组件传值过来的;你可以在data中声明该值
    	          userlog:{  //json对象,userlog.log存放图片的地址
    	            required:true
    	          }
    	        },
    	        name: "UserImg",
    	        data:function(){
    	          return{
    	            defaultlog:'../../assets/mycount.svg',
    	            flag:true,  //控制显示编辑头像  保存、取消
    	            befUrl:'', //存放之前的图片地址,用于点击取消时使用
    	            // savUrl:'',//存放点击保存的,序列化生成的url;不必,因为每次只有点击选择文件(编辑头像时,都会将userlog的图片地址重新赋值给befUrl)
    	            newForm:{}, //用来指向new FormData()对象,序列化表单时使用
    	            config:{},//用来放ajax请求头部信息的
    	
    	          }
    	        },
    	        methods:{
    	          changeLog:function () {
    	            // let user={'id':id,'myStatus':6,'changeInfo':this.myAddress};
    	
    	            let id=17;//---------------为了传给后台-------------------------------------------
    	            let that=this;
    	            let file=event.target.files[0] ; //文件  是个列表,取下标为0
    	            if(file){
    	              this.befUrl=this.userlog.log;
    	              // console.log(event.target);  //input标签
    	              // console.log(event.target.files);    //文件列表
    	              // console.log(event.target.files[0]);    //第一个文件,有很多属性包含name,时间等;
    	              // console.log(event.target.files[0].name);    //第一个文件的名字
    	              // console.log(event.target.value);    //文件路径+文件名  字符串
    	
    	              let formdata=new FormData() ;//创建一个formdata对象 
    	              formdata.append('usericon',file,file.name);//通过append向formdata对象添加数据,【序列化的key是自己写的字符串'usericon',不再是input type='file' 的name值了】
    	              formdata.append('id',id);
    	              formdata.get('file');
    	              let config={
    	                headers:{'Content-Type':'multipart/form-data'}
    	              };
    	              //发送ajax同步到后台,应该在点击保存的时候
    	             
    	              that.previewImg(file); //选中即预览,非必要,在发送axios时,直接把七牛云的图片地址传回来,也是预览效果	
    	              //赋值用于发送ajax
    	              that.newForm=formdata;
    	              that.config=config
    	            }else{
    	              this.clickCancel()
    	            }
    	            event.target.value=''    //为了让点击取消时,图片也能onchange事件
    	          },
    	          previewImg:function(file){  //图片预览,不需要与后台交互;如果是上传到七牛云,这一步就不必要了
    	            let reader=new FileReader();
    	            let that=this;
    	            reader.readAsDataURL(file);
    	            reader.function () {
    	              that.userlog.log=this.result;
    	            };
    	            that.flag=false//从编辑头像切换的 保存取消
    	          },
    	
    	        clickSave:function () {
    	            let that=this;
    	          //发送ajax同步到后台
    	          axios.post('http://127.0.0.1:8000/qiniutoken',this.newForm,this.config).then(function (res) {
    	            console.log(res);
    	            console.log(res.data);
    	            that.flag=true;
    	            // that.previewImg(file)
    	            alert(res.data.status_text)
    	            that.userlog.log=res.data.src;
    	          }).catch(function (err) {
    	            console.log(err);
    	          })
    	
    	        },
    	
    	        clickCancel:function () {
    	          this.userlog.log=this.befUrl;
    	          this.flag=true;
    	
    	        },
    	
    	        }
    	
    	    }
    	</script>
    

    css样式
    https://blog.csdn.net/weixin_43807076/article/details/88849735

    展开全文
  • axios.post(this.qiniuUploadURL, formData, { 'Content-Type': 'multipart/form-data' }).then(res => { if (res.data.code == "200") { this.$util.message("suc", "上传成功"); } else { this.$util.message(...

    html

    <input @change="getpolicy($event)" type="file" accept=".png" :ref="refName" class="upInput" />
    

    js
    request是封装好的方法,qiniuyun是后端给的接口

      data() {
                return {
                    qiniuUploadURL: 'http://up-z2.qiniu.com',
                }
            },
      methods: {
          getpolicy() {
              request(qiniuyun).then((res) => {
                  if (res.code === "200") {
                      let files = this.$refs[this.refName].files
                      let length = files.length
                      for (let i = 0; i < length; i++) {
                          this.qiniuyunUpload(files[i], res.data)
    
                      }
                  }
              });
          },
          qiniuyunUpload(file, qiniuyunToken) {
              let formData = new FormData();
              //注意formData里append添加的键的大小写
              formData.append('key', qiniuyunToken.key)
              formData.append('token', qiniuyunToken.token)
              //如果是base64文件,那么直接把base64字符串转成blob对象进行上传就可以了
              formData.append("file", file);
              axios.post(this.qiniuUploadURL, formData, {
                  'Content-Type': 'multipart/form-data'
              }).then(res => {
                  if (res.data.code == "200") {
                      this.$util.message("suc", "上传成功");
                  } else {
                      this.$util.message("err", res.message);
                  }
              })
    
          },
      }
    
    展开全文
  • 开发环境 后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0

    环境准备

    开发环境
    后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3
    前端: vue-element-admin4.4.0


    相关链接
    七牛云JavaSDK
    七牛云存储区域域名
    Element upload 上传组件文档
    Antd Vue form 表单文档

    后端操作

    前端(客户端上传方式)通过组件上传图片到七牛云, 需要先从七牛云获取token, 这里用Java获取token, 前端拿到token才可以上传图片到七牛云, 删除的时候也是同理, 也需要先有token, 指定文件名称才能删除(上传是在服务端拿到token返回给前端通过前端上传图片, 删除是直接在服务端删除)

    添加Maven依赖

    <dependency>
    	 <groupId>com.qiniu</groupId>
    	 <artifactId>qiniu-java-sdk</artifactId>
    	 <version>[7.2.0, 7.2.99]</version>
    </dependency>
    

    文档

    上传文档
    在这里插入图片描述
    在这里插入图片描述
    删除文档
    在这里插入图片描述

    文档说明, 获取token只需要三个数据 accessKey, secretKey, bucket, 这三个是在七牛云控制台获取, 简单获取的话前三个值可以按照文档直接定义变量写死, 本文中相关数据存储在数据库, 通过创建实体类对象获取 , 删除时还需要文件key值, key值是我们文件的名称, 本文中key通过前端发送post请求带到后端

    accessKey, secretKey, bucket 获取, 登录七牛云后台
    在这里插入图片描述
    在这里插入图片描述

    数据库表
    在这里插入图片描述
    Mybatis自动生成代码, 直接上Controller层…

    /**
     * @author chen
     * @date 2020-07-12 22:06
     */
    
    @RestController
    @RequestMapping(value = "/api/qiniu")
    public class QiNiuController {
        @Resource
        private IQiNiuService qiNiuService;
    
        @RequestMapping(value = "/get_token", method = RequestMethod.GET)
        public QiNiu getToken() {
            QiNiu qiNiu = new QiNiu();
            long expireSeconds = 600;
            StringMap putPolicy = new StringMap();
            // 数据表只有一条数据, 直接拿第一条
            QiNiuEntity qiniu = qiNiuService.selectAll().get(0);
            // accessKey = qiniu.getAk()
            // secretKey = qiniu.getSk()
            // bucket = qiniu.getBucket()
            Auth auth = Auth.create(qiniu.getAk(), qiniu.getSk());
            qiNiu.setToken(auth.uploadToken(qiniu.getBucket(), null, expireSeconds, putPolicy));
            return qiNiu;
        }
    
        @RequestMapping(value = "/del_file", method = RequestMethod.POST)
        public String delImg(@RequestBody String key) {
            //构造一个带指定 Region 对象的配置类
            Configuration cfg = new Configuration(Region.region0());
            QiNiuEntity qiniu = qiNiuService.selectAll().get(0);
            Auth auth = Auth.create(qiniu.getAk(), qiniu.getSk());
            BucketManager bucketManager = new BucketManager(auth, cfg);
            try {
                bucketManager.delete(qiniu.getBucket(), key);
            } catch (QiniuException ex) {
                //如果遇到异常,说明删除失败
                System.err.println(ex.code());
                System.err.println(ex.response.toString());
                return "删除失败";
            }
            return "删除成功";
        }
    }
    

    前端操作

    前置数据:
    domain: ‘https://upload-z2.qiniup.com’ // 七牛云的上传地址(华南区), 根据自己的实际区域配置, 区域对应的地址在文章开头的相关链接
    qiniuAddr: ‘http://自己七牛云的图片外链地址’, // 七牛云的图片外链地址
    前端内容和操作:
    前端是一个带图片的表单, 点击上传图片图片直接上传到七牛云, 提交表单只是提交图片在七牛云的外链地址, 未提交表单时, 图片可以删除…具体还需要什么操作可以自己添加…文章开头留了文档的地址…

    外链地址
    在这里插入图片描述
    前端代码

    <template>
      <div class="app-container">
        <div>
          <a-form :form="form" :label-col="{ span: 3, minWidth: 100 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit">
            <a-form-item label="XX名称">
              <a-input
                v-decorator="['xx_name', { rules: [{ required: true, message: 'xxxx!' }] }]"
              />
            </a-form-item>
            <a-form-item label="xx分类">
              <a-select
                v-decorator="[
                  'xx_tag',
                  { rules: [{ required: true, message: 'xxxx!' }] },
                ]"
                placeholder="xxxx"
                @change="handleSelectChange"
              >
                <a-select-option value="AA">
                  AA
                </a-select-option>
                <a-select-option value="BB">
                  BB
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="上传图片">
              <el-upload
                class="upload-pic"
                :action="domain"
                :data="qiniuData"
                :on-remove="handleRemove"
                :on-error="uploadError"
                :on-success="uploadSuccess"
                :before-remove="beforeRemove"
                :before-upload="beforeUpload"
                :on-exceed="handleExceed"
                :limit="1"
                :file-list="fileList"
                list-type="picture"
              >
                <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
              </el-upload>
            </a-form-item>
            <a-form-item label=" " :colon="false">
              <a-button type="primary" html-type="submit" class="btn-gutter">
                提交
              </a-button>
              <a-button @click="resetForm()">重置</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          formLayout: 'horizontal',
          form: this.$form.createForm(this, { name: 'form' }),  // antd vue 的form表单的数据绑定方式
          loading: false,
          qiniuData: {
            key: '', // 图片名字处理
            token: '' // 七牛云token
          },
          domain: 'https://upload-z2.qiniup.com', // 七牛云的上传地址(华南区)
          qiniuAddr: 'http://自己七牛云的图片外链地址', // 七牛云的图片外链地址
          uploadPicUrl: '', // 提交到后台图片地址
          fileName: '',
          fileList: []
        };
      },
      // 生命周期函数, 挂载后
      mounted() {
        this.getQiniuToken();
      },
    
      methods: {
        handleSelectChange(value) {
          console.log(value);
          setTimeout(() => {
            this.form.setFieldsValue({
              note: `${value === 'AA' ? 'AA' : 'BB'}!`
            });
          }, 100);
        },
        // 删除图片
        handleRemove(file, fileList) {
          this.$http.post('/api/qiniu/del_file',
            this.fileName)
            .then(response => {
              const { status} = response;
              if (status === 200) {
                this.fileName = '';
                this.uploadPicUrl = '';
              }
            })
            ['catch'](error => {
              console.log(error);
            });
        },
        // 文件超出个数限制
        handleExceed(files, fileList) {
          this.$message.warning(
            '当前限制选择 1 张图片,如需更换,请删除上一张图片在重新选择!'
          );
        },
        // 上传前
        beforeUpload(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.key = `pic_${new Date().getTime()}_${file.name}`;
        },
        uploadSuccess(response, file, fileList) {
          this.fileName = `${response.key}`;
          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() {
          const data = this.form.getFieldsValue();
          console.log(data);
          // 自己定义提交内容
        },
        // 请求后台拿七牛云token
        getQiniuToken() {
          this.$http.get('/api/qiniu/get_token')
            .then(response => {
              const { status} = response;
              const { token } = response.data;
              if (status === 200) {
                this.qiniuData.token = token;
              }
            })
            ['catch'](error => {
              console.log(error);
            });
        },
        // 重置表单
        resetForm() {
          this.form.resetFields();
        }
    
      }
    };
    </script>
    
    <style>
      .btn-gutter {
        display: inline-block;
        margin-right: 20px;
      }
    </style>
    
    
    展开全文
  • vue上传文件到七牛云

    千次阅读 2018-11-29 09:03:05
    ## vue上传文件到七牛云 &lt;template&gt; &lt;div class="accessoryBox"&gt; &lt;!--附加列表展示--&gt; &lt;div class="fileListBox" v-for="file ...
  • Vue上传文件/图片到七牛云

    千次阅读 2018-10-04 10:15:03
    目的:使用 vue 上传文件/图片 到七牛云 说明: 1、前台使用vue,后台用 java 传递一个 token。 2、token : 这个相当于一个密钥。 3、简单点说。就不写什么去注册账号,找到 as he ks 啥的,都这一步,...
  • 在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处采用七牛云进行图片存储。 经过测试,通过七牛云获取图片确实比...
  • 七牛云官网 七牛云开发者文档 选择对象存储,新建一个存储空间,里面包含你的文件外链 在node后端服务需要用到的数据就是 1、 空间名称bucket, 我这里就是 cwh-imglist 2、 SK 和 AK ,在控制面板的密匙...
  • 一、关于七牛云 原文地址 注册并实名认证为标准用户,可享受10GB的免费存储。点击注册 1.注册账号并实名认证后,登录开发者中心。 2.点击对象存储,新建存储空间,会获得一个测试的域名,但是不能配置。可以...
  • Vue+七牛云上传图片

    2020-11-10 10:30:59
    Python + Vue + 七牛云上传图片 申请七牛云账号、创建七牛云空间这是省略 1、使用python获取上传使用的token值 安装七牛云 pip install qiniu==7.2.6 获取token,这里是使用的工用方法,在myutils下创建qiniu_...
  • 应约学生的需求 写一篇关于element-ui上传图片到七牛云的示例 https://element.eleme.cn/#/zh-CN/component/upload 这是上传图片的参考文档 目的: 是通过使用ElementUI的 upload组件上传图片到七牛云 储存对象...
  • vue element-ui 上传文件到七牛云

    千次阅读 2018-06-28 18:27:45
    很多人对于上传文件还是有一定的恐惧感,作为一个前端工程师来说,好像上传就应该来后端去做,但今天,我想给大家推荐写一下自己使用vue上传文件的心得,可以使用vue就可以直接上传到七牛云,写的不好勿喷。...
  • ueditor上传七牛经历了一个多星期,终于做的比较满意的实现了,期间踩过很多坑...1、UEditor1.4.3版本-直接上传视频、附件、图片到七牛云存储,并且支持图片在线管理功能:[https://github.com/widuu/qiniu_ueditor...
  • vue+ant desgin pro 上传图片七牛云1. 在public文件目录的index.html中引入2. 在main.js文件中添加3. 在page页面中引入4. 在项目命令窗口安装5. 后端接口返回数据参数,如下图所示:6. 前端编辑代码如下: 1. 在...
  • vue基于七牛云 上传图片、视频

    千次阅读 2019-05-13 10:49:17
    console.error("获取七牛云token失败", e) }) } 七牛云方法 export async function uploadQinuImage(file) { var token = await getQiniuToken() var key = getTimeForQiniu() + file.name var ...
  • vue-cropper图片裁剪插件,axios发送请求 用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结
  • Vue+element-ui上传文件和分片上传到七牛云一、实现效果二、上传到七牛云的过程三、实现组件代码1.上传组件代码2.引入组件3.提示 公司可能会将图片文件等存储到七牛云、阿里云等服务器方便管理。我这里将文件上传到...
  • Vue+SpringBoot整合七牛云图片上传

    千次阅读 2020-04-19 09:39:49
    SpringBoot整合七牛云图片上传
  • 主要介绍了node koa2实现上传图片并且同步上传到七牛云存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 七牛云上传图片demo

    2018-05-17 17:21:35
    七牛云上传图片demo 稳定能用 ,文件内有注释,按注释填写完即可
  • 4、前端通过vue+elementui上传文件,只要封装好上传的文件对象和文件名的一些属性成dataObj然后指定上传路径即可 dataObj所有参数如下: _self.dataObj.key = response.data.dir + '/'+getUUID()+'_'+file.name; _...
  • vue上传图片到7牛云

    2018-11-14 16:10:52
    inputChange(event){ //图片上传的事件 var file = event.target.files[0]; var formData = new FormData(); formData.append('file', file); formData.append('token', this.qiniuToken); //在后台获取7牛的...
  • 七牛云 上传图片到七牛云并返回图片URL

    万次阅读 多人点赞 2018-09-01 11:03:36
    七牛云 上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致...
  • ueditor将上传图片到七牛云整合, 里面采用的是PHP获取token,当然可以随便换语言的

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,176
精华内容 470
关键字:

vue上传图片到七牛云

vue 订阅