<template>
<view class="container wrap">
<!-- 附件 -->
<view class="cu-list menu">
<view class="cu-item fj">
<view class="content"><text>附件:</text></view>
<view class="action text-left"><view ref="input" class="input"></view></view>
</view>
</view>
</view>
</template>
<script>
import qiniu from '../../static/js/qiniuUploader.js';
var that;
export default {
data() {
return {
readOnly: false,
formats: {},
infoType: false,
radio: 0,
levelList: [],
levelName: '',
statusColor: '',
themeList: [],
themeIndex: 998,
personnelIds: [],
departIds: [],
mailTitle: '',
upToken: '',
imgSrc: '',
contextValue: '',
attachmentName: '', //附件name
attachmentUrl: '' //附件URL
};
},
mounted() {
//创建file
var input = document.createElement('input');
input.type = 'file';
input.onchange = event => {
// event.path[0].files[0] 附件本身
console.log(event.path[0].files[0]);
console.log(event);
that.attachmentName = event.path[0].files[0].name;
that.previewFile(event.path[0].files[0]);
};
this.$refs.input.$el.appendChild(input);
},
onLoad(option) {
that = this;
// 获取上传token
that.getUploadToken();
// 每隔两小时 更新token
setInterval(function() {
that.getUploadToken();
}, 2 * 60 * 60 * 1000);
},
methods: {
previewFile(file) {
var reader = new FileReader();
reader.onloadend = function() {
console.log(reader.result);
console.log(that.dataURLtoFile(reader.result, file.name));
console.log(URL.createObjectURL(that.dataURLtoFile(reader.result, file.name)));
let url = URL.createObjectURL(that.dataURLtoFile(reader.result, file.name));
that.uploadFile(url, file.name);
};
reader.readAsDataURL(file);
},
dataURLtoFile(dataurl, filename) {
//将base64转换为blob
var arr = dataurl.split(',');
var bstr = atob(arr[1]);
var n = bstr.length;
var mime = arr[0].match(/:(.*?);/)[1];
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//上传文件
uploadFile(file, fileName) {
uni.showLoading({
title: '上传附件中...'
});
console.log(that.upToken);
qiniu.upload(
file,
fileName,
res => {
//图片上传完成后返回值
console.log('success');
console.log(JSON.stringify(res));
console.log(res);
that.attachmentUrl = res.fileURL;
uni.hideLoading();
},
error => {
// resolve(error)
console.log('error');
console.log(error);
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '上传失败'
});
},
{
region: 'SCN', // (必须填写正确)ECN, SCN, NCN, NA, ASG,分别对应七牛的:华东,华南,华北,北美,新加坡 5 个区域
domain: 'http://waimao.share.xinhai.com', // // bucket 域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字 段。否则需要自己拼接
// 以下方法三选一即可,优先级为:uptoken > uptokenURL > uptokenFunc
uptoken: that.upToken // 由其他程序生成七牛 uptoken
},
res => {
//上传进度
if (res.progress === 100) {
console.log(res);
// resolve(keys);
console.log('进度');
// console.log(resolve(keys))
}
}
);
},
// 获取token
getUploadToken() {
if (that.upToken) {
return false;
}
uni.request({
url: that.requestUrl + 'auth/upToken',
header: {
Authorization: that.token
},
method: 'get',
success(data) {
console.log(data);
console.log(data.data);
if (data.data.code == 0) {
console.log(data.data.data);
that.upToken = data.data.data;
} else {
uni.showToast({
icon: 'none',
title: data.msg,
duration: 2000
});
}
},
fail(error) {
uni.showToast({
icon: 'none',
title: '数据加载失败',
duration: 2000
});
console.log(error);
}
});
}
}
};
</script>
<style scoped lang="scss">
</style>
uniapp 非图片格式文件上传七牛
最新推荐文章于 2024-04-16 12:06:15 发布