廖鑫豪的个人博客

@lxhcool

男,爱好女

文章 8
朋友 7
来访 11

工具

框架

灵感

社区

资源

酷站

RANKINGS

    • 杭州
    • https://www.lxhcool.cn
    • 网站成立551天

    lxhcool

    • 默认

    vue 中 上传图片到七牛云

    使用http://up.qiniu.com无需引入插件,操作简单

    就这么多了,还想知道什么

    <template>
      <div class="wrap">
        <div class="container">
          <div class="form-wrap">
            <div class="license">
              <span>图片</span>
              <div class="license-img-box">
                <input
                  ref="upload"
                  id="upload"
                  type="file"
                  class="upload-img"
                  @change="uploadHeadimg"
                />
                <img :src="licenseImg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
      data () {
        return {
          licenseImg: ''
        }
      },
      methods: {
        // 上传图片
        async uploadHeadimg () {
         // 请求后端接口获取token
          var qiData = await this.$api.upImg()
          if (this.$refs.upload.files[0]) {
            let self = this
            // 创建axios的实例
            const axiosInstance = axios.create({})
            var data = new FormData()
            data.append('token', qiData.data.token)
            data.append('file', this.$refs.upload.files[0])
            // 开始请求七牛接口
            axiosInstance({
              method: 'POST',
              url: 'http://up.qiniu.com',
              data: data
            }).then(function (res) {
              let { key } = res.data
              // 页面所用字段
              self.licenseImg = qiData.data.domain + key + '?imageView2/1/w/154/h/154'
            })
              .catch(function (err) {
                console.log('err', err)
              })
          }
        },
      }
    }
    </script>
    

     

    Comments | NOTHING

      游客,你好 修改资料

    *邮箱和昵称必须填写