vue上传图片与导入文件

1.文件导入

<el-upload   v-permission="['PRIV_DEVICEINFO_IMPORT']" style="margin-left: 20px;" accept="xls,xlsx" class="avatar-uploader" :action="avatarUploadUrl" :headers="headers" :on-success="handleAvatarSuccess" :show-file-list="false">
				<el-button type="primary" icon="el-icon-document-add" size="small" style="color: #000; background-color: #3031330d; border-color: #3031330d">
					导入
				</el-button>
</el-upload>
data() {
		return {
			isShow: false,
			// 上传链接
			avatarUploadUrl: process.env.VUE_APP_BASE_API + '/DeviceInfo/ImportData',
}}
// 上传成功
		handleAvatarSuccess(response, file) {
			console.log(response, file, 11111);
			if (response.statusCode === 200) {
				this.getList();
				this.$message({
					message: response.message,
					type: 'success'
				});
			} else {
				this.$message.error(response.message);
			}
		},

2.上传图片(base64格式)

<el-dialog title="上传图片"  :visible.sync="isShow" width="75%" append-to-body :close-on-click-modal="false" @close="isShow = false">
			<div>
				<el-upload class="upload-file" ref="upload" :limit="1" action="#" :before-upload="beforeUpload" :http-request="uploadFile" accept="xls,xlsx">
					<el-button
						type="primary"
						icon="el-icon-document-add"
						size="small"
						style="margin-left: 20px; color: #000; background-color: #3031330d; border-color: #3031330d"
					>
						上传设备图片
					</el-button>
				</el-upload>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
				<el-button @click="isShow = false">取 消</el-button>
			</div>
		</el-dialog>
		beforeUpload(file) {
			let fileName = file.name;
			let fileType = fileName.substring(fileName.lastIndexOf('.'));
			console.log(fileType,7777)
			if (fileType != '.png' && fileType != '.jpg'&& fileType != '.jpeg'&& fileType != '.JPG') {
				this.$message.error('请上传正确的（png/jpg/jpeg)图片格式！');
				return false;
			}
		},
		uploadFile(data) {
			this.$TF.getBase64(data.file).then((resBase64) => {
				// console.log(resBase64.split(',')[1]);
				let obj = {
					id: this.id,
					base64Str: resBase64.split(',')[1]
				};
				UploadDeviceImage(obj).then((response) => {
					if (response.statusCode == 200) {
						this.$message.success('上传成功');
						this.getList();
						this.isShow = false;
						this.$refs.upload.clearFiles();
					} else {
						this.$message.error(response.message);
					}
				});
			});
		},
main.js:
// 全局方法挂载
import TF from './utils/public' 
 Vue.prototype.$TF = TF;
public.js
let TF = {
 getBase64(file) {
		return new Promise((resolve, reject) => {
			let reader = new FileReader();
			let fileResult = "";
			reader.readAsDataURL(file);
			//开始转
			reader.onload = function() {
				fileResult = reader.result;
			};
			//转 失败
			reader.onerror = function(error) {
				reject(error);
			};
			//转 结束  咱就 resolve 出去
			reader.onloadend = function() {
				resolve(fileResult);
			};
		});
	},
}
export default TF