上传文件或图片

 <input
     id="file"
     type="file"
     ref="fileData"
     style="display:none;"
     @change="changeFile()"
   />
  <img :src="avatar" class="img-style" @click="fileOpen()" />

点击头像,切换图片

 fileOpen () {
   document.getElementById('file').click()
 },
 changeFile () {
   let self = this
    var file = this.$refs.fileData.files[0]
    this.file_name = file.name
    if (/^image\//.test(file.type)) {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = async function () {
        self.avatar = this.result
        self.upload(this.result)
      }
    }
  },
  upload (imgData) {
    this.axios.post('/admin/api/v2/personaluser', {
       file_name: this.file_name,
       key: this.key
     }, { headers: { token: this.token } }).then(async res => {
       let uploadlink = res.data.data.upload_url //获取上传链接
       sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.user))
       if (res.data) {
         let bytes = window.atob(imgData.split(',')[1])
         let arrayBuffer = new ArrayBuffer(bytes.length)
         let intArray = new Uint8Array(arrayBuffer)
         for (let i = 0; i < bytes.length; i++) {
           intArray[i] = bytes.charCodeAt(i)
         }
         let blob = new Blob([intArray], {
           type: 'application/json'
         })
         var files = new window.File([blob], this.file_name)
         // put请求上传 上传图片到服务器
         this.fetchResult = await fetch(uploadlink, {
           method: 'PUT',
           body: files
         }) 
         // post请求
          let formData = new FormData()
          formData.append('file', files)
          formData.append('key', result.fields.key)
          formData.append('x-amz-algorithm', result.fields['x-amz-algorithm'])
          formData.append('x-amz-credential', result.fields['x-amz-credential'])
          formData.append('x-amz-date', result.fields['x-amz-date'])
          formData.append('policy', result.fields.policy)
          formData.append('x-amz-signature', result.fields['x-amz-signature'])
          let fetchResult = await fetch(link, {
            method: 'POST',
            body: formData
          })
       }
     })
    }
上传文件(文件和图片都行)
<v-file-input label="上传文件" v-model="file"></v-file-input>

async saveFile () {
  console.log('this.file', this.file)
  let i = this.file.name.lastIndexOf('.')
  size = Math.round(this.file.size / 1000)
  classify = this.file.name.substring(i + 1, this.file.name.length)

 // post upload file
   let formData = new FormData()
   formData.append('file', this.file)
   formData.append('key', result.fields.key)
   formData.append('x-amz-algorithm', result.fields['x-amz-algorithm'])
   formData.append('x-amz-credential', result.fields['x-amz-credential'])
   formData.append('x-amz-date', result.fields['x-amz-date'])
   formData.append('policy', result.fields.policy)
   formData.append('x-amz-signature', result.fields['x-amz-signature'])
   //result.url 获取到的上传链接
    await fetch(result.url, {
        method: 'POST',
        body: formData
      }).then((res) => {
        return res
      }).catch((err) => {
        console.error('err: ', err)
        return err
      })
}

发布了20 篇原创文章 · 获赞 6 · 访问量 649

猜你喜欢

转载自blog.csdn.net/LR13567/article/details/104699841
今日推荐