1.后台返回二进制流 前端进行下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
** data:二进制的数据
** name:下载的包名
*/
var service = axios.create({
    responseType: 'blob', // 返回数据的格式,其可选项是arraybuffer,blob,
    // document,json,text,stream,默认值为json
})

chunkBlob(data, name) {
    if (!e || !window.FileReader) return // 看支持不支持FileReader
    var reader = new FileReader() // 需要支持fileReader
    reader.readAsDataURL(data)
    reader.onload = function(e) {
        var a = document.createElement('a')
        a.download = name + Date.now() + '.zip'
        a.href = e.target.result
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }
}

2.返回要下载的文件名，通过 a 标签去下载

1
2
3
4
5
6
var a = document.createElement('a')
a.download = fileName // 下载的文件名
a.href = baseURL + fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

3.使用 formData 上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 点击按钮就上传 -->
<button @click="clickInput">上传</button>
<input type="file" ref="file" @change="uploadFile" style="display:none"/>

<!-- 本地图片需要预览 采用label的for id -->
<label for="inputFile">
    <img width="148" height="148" :src="previewSrc" v-show="previewSrc">
        <div class="img-upload" v-show="!previewSrc">
            <i class="el-icon-plus"></i>
            <input class="image-input" id="inputFile" accept="image/jpeg,image/jpg,image/png"
             type="file" @change="changeImg($event)" />
        </div>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.img-upload {
  display: inline-block;
  text-align: center;
  background-color: #fbfdff;
  border: 1px dotted #d9d9d9;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
  box-sizing: border-box;
  &:hover {
    color: #67c23a;
    border-color: #67c23a;
    cursor: pointer;
  }
  .el-icon-plus {
    font-size: 28px;
    color: #8c939d;
  }
  .image-input {
    display: none;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function clickInput() {
  this.$refs['file'].click()
}

function uploadFile(e) {
  let files = e.target.files // 单个or多个文件

  let formData = new FormData()
  formData.append('apk', files[0])
  formData.append('other', '其他属性值')
  requestFileDate(formData).then(res => {
    console.log(res.data)
  })
}

function changeImg(e) {
  var imageFile = e.target.files[0]
  if (!e || !window.FileReader) return // 看支持不支持FileReader
  let reader = new FileReader()
  reader.readAsDataURL(imageFile) // 这里是最关键的一步，转换就在这里
  let _this = this
  reader.onloadend = function() {
    _this.previewSrc = this.result
  }
  this.reqFormData = new FormData()
  this.reqFormData.append('base_image', imageFile)
  e.srcElement.value = '' // 清空防止上传图片时选择相同文件无法触发change事件
}

// 设置axios的headers['Content-Type'] = 'multipart/form-data'

export function requestFileDate(data) {
  return request({
    url: '/upload',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}