uniapp-微信小程序-上传文件
<!-- 上传文件(自定义文件类型) -->
<template>
<view class="upload-file-contarner" @click="handleUploadFile"> + </view>
</template>
<script>
export default {
components: {},
props: {
types: {
type: String,
default: () => '.png,.jpg,.jpeg,.pdf,.doc,.docx,.xls,.xlsx',
},
maxFile: {
type: Number,
default: 5,
},
},
data() {
return {};
},
methods: {
handleUploadFile() {
const types = this.types.split(',');
wx.chooseMessageFile({
count: this.maxFile,
extension: types,
success: async (res) => {
const files = res.tempFiles;
const processResultFiles = async () => {
const promise = files.map(async (v) => {
return await this.asyncResultFiles(v);
});
return await Promise.all(promise);
};
const processArr = await processResultFiles();
this.$emit('handleUploadFile', processArr);
},
fail: (err) => {
throw err;
},
});
},
asyncResultFiles(item) {
return new Promise(async (resolve) => {
const result = await this.uploadFilePromise(item.path);
const res = JSON.parse(result);
if (res.code === '00000') {
resolve(res.data);
}
});
},
uploadFilePromise(filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${process.env.VUE_APP_BACK_URL}/nqi/file/uploadTopfs`,
url: `${process.env.VUE_APP_BASE_URL}/nqi/file/uploadTopfs`,
filePath: filePath,
name: 'file',
header: {
'top-token': uni.getStorageSync('top-token'),
},
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
},
});
});
},
},
};
</script>
<style scoped lang="scss">
.upload-file-contarner {
cursor: pointer;
width: 100%;
height: 80rpx;
font-size: 50rpx;
text-align: center;
line-height: 80rpx;
border: 1px solid $u-light-color;
color: $u-light-color;
margin-bottom: 20rpx;
margin-top: 20rpx;
}
</style>