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拼接圖片地址進行訪問圖片地址