vue中使用七牛图片上传

vue中使用七牛图片上传

引入七牛

npm(cnpm) install --save qiniu
复制代码

项目引入七牛进项使用

import Qiniu from 'qiniu.js'
复制代码

html代码使用

定义input标签接收上传的图片地址

<div style="margin-left:10px;">
    <input ref="imgLocal" class="input-loc-img" name="imgLocal" id="imgLocal" type='file' accept="image/*">
    <span @click="updateer">上传</span>
  </div>
复制代码

js代码使用 图片上传

//url 七牛部署的地址
  // bucket参数为七牛的空间名 
  // this.$refs.imgLocal.files[0] 为上传的图片的名包含路径
  // res返回数据为一个key,经过key能够获取上传到七牛上的图片地址 
  // 图片上传凭证
  updateer() {
  // bucket:‘public-image’(可直接拼接图片地址)
    axios.post('url', { bucket: '' }).then((res) => {
      const uploadToken = res.data.upToken;
      var data = new FormData();
      data.append('token', uploadToken);
      data.append('file', this.$refs.imgLocal.files[0]);
      axios({
        method: 'POST',
        url: 'http://up.qiniu.com',
        data: data,
        onUploadProgress: function (progressEvent) {
          var percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
        },
      }).then((res) => {
        // `http://publicimage.xq5.com/${response.data.key}`; （若bucket 参数为public-image则不须要下一步的图片地址获取可直接使用http://publicimage.xq5.com/ + ‘res.data.key’，拼接图片地址）
        console.log(res.data.key)
      })
    });
  },
复制代码

图片地址的获取

// url 七牛部署的地址
  // bucket参数为七牛的空间名 file_name参数为上传图片获取到的 key
  // 返回数据为带有http的图片地址
  axios.post(url, { bucket: '', file_name:'' }).then((res) => {
    if (Number(res.data.errno) === 0) {
      console.log(res.data.qrcodeURL)
    }
  });
复制代码

说明

如有公共地址上传图片,则可经过域名加key拼接图片地址进行访问图片地址