uniapp文件上传指南

一、使用uni.uploadFile上传文件

1、首先在页面中添加文件选择器(input type=”file” accept=”image/*”)的组件。

2、为文件选择器添加change事件，处理用户选择的文件并调用uni.uploadFile()函数上传文件。

3、完成文件上传后，服务器返回的数据可以在uni.uploadFile()的回调函数中处理。

 <template>
   <view>
      <input type="file" accept="image/*" @change="uploadFile" />
   </view>
</template>

<script>
export default {
   methods: {
      uploadFile(event) {
         const file = event.target.files[0];
         uni.uploadFile({
            url: 'http://localhost:3000/upload',
            filePath: file.tempFilePath,
            name: 'file',
            success(res) {
               console.log(res.data);
            }
         });
      }
   }
}
</script>

二、设置请求头和参数

1、通过uni.uploadFile()第三个参数的header属性设置请求头。

2、通过uni.uploadFile()第三个参数的formData属性设置参数。

 <script>
export default {
   methods: {
      uploadFile(event) {
         const file = event.target.files[0];
         uni.uploadFile({
            url: 'http://localhost:3000/upload',
            filePath: file.tempFilePath,
            name: 'file',
            header: {
               'Authorization': 'Bearer ' + uni.getStorageSync('token')
            },
            formData: {
               'name': 'avatar'
            },
            success(res) {
               console.log(res.data);
            }
         });
      }
   }
}
</script>

三、限制文件类型和大小

1、通过accept参数限制文件类型。

2、通过fileSize参数限制文件大小。

 <template>
   <view>
      <input type="file" accept="image/png,image/jpeg" :fileSize="1024 * 1024" @change="uploadFile" />
   </view>
</template>

<script>
export default {
   methods: {
      uploadFile(event) {
         const file = event.target.files[0];
         uni.uploadFile({
            url: 'http://localhost:3000/upload',
            filePath: file.tempFilePath,
            name: 'file',
            header: {
               'Authorization': 'Bearer ' + uni.getStorageSync('token')
            },
            formData: {
               'name': 'avatar'
            },
            success(res) {
               console.log(res.data);
            }
         });
      }
   }
}
</script>

四、显示上传进度

1、通过uni.uploadFile()函数的progress属性实现上传进度显示。

2、在页面中添加进度条组件，并将进度值绑定到data中的progress变量。

 <template>
   <view>
      <input type="file" accept="image/png,image/jpeg" :fileSize="1024 * 1024" @change="uploadFile" />
      <progress :percent="progress" />
   </view>
</template>

<script>
export default {
   data() {
      return {
         progress: 0
      }
   },
   methods: {
      uploadFile(event) {
         const file = event.target.files[0];
         uni.uploadFile({
            url: 'http://localhost:3000/upload',
            filePath: file.tempFilePath,
            name: 'file',
            header: {
               'Authorization': 'Bearer ' + uni.getStorageSync('token')
            },
            formData: {
               'name': 'avatar'
            },
            success(res) {
               console.log(res.data);
            },
            progressCallback(res) {
               this.progress = res.progress;
            }
         });
      }
   }
}
</script>

五、使用uni.compressImage()压缩图片

1、上传大量图片可能会导致上传速度变慢，同时也会消耗用户手机的流量。

2、通过uni.compressImage()函数将图片压缩后再上传，可以减少上传时间和流量消耗。

 <script>
export default {
   methods: {
      uploadFile(event) {
         const file = event.target.files[0];
         uni.compressImage({
            src: file.tempFilePath,
            quality: 80,
            success(res) {
               uni.uploadFile({
                  url: 'http://localhost:3000/upload',
                  filePath: res.tempFilePath,
                  name: 'file',
                  header: {
                     'Authorization': 'Bearer ' + uni.getStorageSync('token')
                  },
                  formData: {
                     'name': 'avatar'
                  },
                  success(res) {
                     console.log(res.data);
                  },
                  progressCallback(res) {
                     console.log(res.progress);
                  }
               });
            }
         });
      }
   }
}
</script>