图片,文件上传,element总结

  • 图片转换为base64
<input type="file" id="file_image_upload" @change="fileChange" accept="image/jpeg,image/png">
fileChange(event){
	let f = document.getElementById('file_image_upload').files[0];
	if(!f){
		return;
	};
	try{
		this.page.picname = f.name;
		this.page.picupload = '重新上传';
	}catch(err){
		console.log(err);
	};

}
sbmt() {
	let _that = this;
	let filetxt = document.getElementById('file_image_upload');
	let Imgf = filetxt.files[0];
	if(!Imgf || this.page.picupload =='上传'){
		this.$alert('请上传需要分析的图像数据!', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose:false
        });
		return;
	};

	var reader = new FileReader();
	reader.readAsDataURL(Imgf);
          var tokenData;
          if (localStorage.getItem('xiamenToken')) {
              tokenData = JSON.parse(localStorage.getItem('xiamenToken'))
          }
	reader.onload = async function(){
		_that.from.loading = true;
		_that.from.sure = false;
		let rep;
		let sendata = {
		  "accountId": tokenData.accountId||'',
		  "accountName": tokenData.accountName||'',
		  "base64": this.result,
		  "openModelId": "1",
		  "userData": "{"+
		  	'type:'+parseInt(_that.from.radiotype)+
		  "}"
		}

		try{
			rep = await http.post('/api/v2/dataopen/background/openModelOrderData/submitOrder',JSON.stringify(sendata));

			_that.from.loading = false;
			_that.page.picname = '目前支持jpg、jpeg、png格式的图片';
			_that.page.picupload = '上传';
			if(rep.data.code == 0){
				_that.from.fsure = true;
				_that.from.isSucc = false;
			}else{
				_that.$alert(rep.data.msg, '提示', {
	                confirmButtonText: '确定',
	                type: 'warning',
	                showClose:false
	              });
				_that.from.loading = false;
				_that.from.sure = true;
				return;
			}

		}catch(e){
			_that.$alert('由于网络原因上传失败!请重新上传。', '提示', {
	                confirmButtonText: '确定',
	                type: 'warning',
	                showClose:false
	              });
			_that.from.loading = false;
			_that.from.sure = true;
			return;
		}
	};

	filetxt.value = '';
},
  • 文件上传
<input type="file" id="file_text_upload" @change="fileChange" accept="text/plain">
fileChange(){
	let f = document.getElementById('file_text_upload').files[0];
	if(!f){
		return;
	};
	try{
		this.page.picname = f.name;
		this.page.picupload = '重新上传';
	}catch(err){
		console.log(err);
	}
}
async sbmt() {
			let _that = this;
			let timer;
			let filetxt = document.getElementById('file_text_upload');
			let filetext = filetxt.files[0];

			if(!filetext || this.page.picupload =='上传'){
				this.$alert('请上传需要分析数据!', '提示', {
		          confirmButtonText: '确定',
		          type: 'warning',
		          showClose:false
		        });
				return;
			};
				let rep;
				let accessToken = {"accessToken":_that.token,"content-type":"multipart/form-data","Accept": "application/json",};
				let myfile = new FormData();

				var tokenData;
				if (localStorage.getItem('xiamenToken')) {
					tokenData = JSON.parse(localStorage.getItem('xiamenToken'))
				}
				let pams = {
						"accountId": tokenData.accountId||'',
				  		"accountName": tokenData.accountName||'',
				  		"openModelId": "2"
				  	}
				myfile.append('orderDataJson',JSON.stringify(pams));
				myfile.append('userFile',filetext);
				console.log(myfile);
				try{
					rep = await http.post('/api/v2/dataopen/background/openModelOrderData/submitOrderFile',myfile);
					console.log(rep.data);
					if(rep.data.code == 0){
						_that.from.loading = false;
					}else{
						_that.$alert(rep.data.msg, '提示', {
				          confirmButtonText: '确定',
				          type: 'warning',
				          showClose:false
				        });
				        return;
					}

				}catch(e){
					console.log(e.message);
					console.log(e.message);
					_that.$alert('由于网络原因上传失败!请重新上传。', '提示', {
			                confirmButtonText: '确定',
			                type: 'warning',
			                showClose:false
			              });
					_that.from.loading = false;
					_that.from.sure = true;
					return;
				}
				let s = true;
				if(!s){
					_that.$alert('由于网络错上传失败!请重新上传', '提示', {
			          confirmButtonText: '确定',
			          type: 'warning',
			          showClose:false
			        });
			        return;
				};
				_that.from.loading = true;
				_that.from.sure = false;
				timer = setInterval(function(){
					_that.from.loading = false;
					_that.from.fsure = true;
					_that.from.isSucc = false;
					_that.page.picname = '目前支持.txt格式的文件';
					_that.page.picupload = '上传';
					clearTimeout(timer);
				},2000)
			//};
			filetxt.value = '';
		},
  • element表格总结
<el-table :data="supplierList" border style="width: 100%">
    <p> {{supplierList.payWay}}</p>
    <el-table-column prop="providerName" label="供应商名称"></el-table-column>
    <el-table-column prop="dataServiceNumber" label="数据服务数量"></el-table-column>
    <el-table-column prop="payWay" label="结算方式">
        <template slot-scope="scope">
                <div v-if="pageTotal!=0">{{scope.row.payWay==1?'月结':'季结'}}</div>
        </template>
    </el-table-column>
    <el-table-column prop="abutmentUserName" label="对接人"></el-table-column>
    <el-table-column prop="telephone" label="联系电话"></el-table-column>
    <el-table-column prop="state" label="操作">
        <template slot-scope="scope">
            <div>
                <el-button size="mini" type="text" class="link-modify" @click="edit(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="aboutDataService(scope.row)">关联数据服务</el-button>
                <el-button size="mini" type="text" @click="aboutAontract(scope.row)">关联合同</el-button>
            </div>
        </template>
    </el-table-column>
</el-table>
  • 下载pdf
downloadContract(item){
    let vm = this;
    let params = {
        prefix:vm.downBaseUrl,
        uri:item.contractFile
    }
    downloadContractApi(params).then(res => {
        // 处理文件名字
        let strNum = item.contractFile.lastIndexOf('/')+1
        let fileNameTmp = item.contractFile.substring(strNum)

        const content = res;
        const blob = new Blob([content]);
        const fileName = fileNameTmp; 
        if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); //释放URL 对象
            document.body.removeChild(elink);
        } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        } 
        
    });
}

猜你喜欢

转载自blog.csdn.net/qq_33332184/article/details/90897876
今日推荐