uniapp 非图片格式文件上传七牛

最新推荐文章于 2024-04-16 16:06:23 发布

oyy_1126

最新推荐文章于 2024-04-16 16:06:23 发布

阅读量538

点赞数

CC 4.0 BY-SA版权

分类专栏： vue相关 uniapp 文章标签： vue.js

本文链接：https://blog.csdn.net/oyy_1126/article/details/108470768

vue相关同时被 2 个专栏收录

5 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

本文介绍了一个小程序中实现文件上传功能的详细过程，包括利用七牛云进行文件上传、预览和处理上传进度的方法。通过创建文件输入元素并监听其变化，可以获取到附件本身，并将其转换为Base64格式进行预览。同时，文章还展示了如何使用七牛云的SDK进行文件上传，以及如何处理上传成功和失败的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>