前言：使用element上传图片之后，文件file下的url是blob：http//localhost：8080地址，后端不好处理
问题如上图所示
采用比较笨的js解决方法，将bolb文件打开，读取src属性(这是一个base64的数据流)，把src的内容一起发送给后端。
这是一个上传图片子组件demo
点击上传
export default {
name: 'regShopImg',
data () {
return {
imageUrl: '',
imgthing: {}
}
},
props: ['imgN', 'nameN'],
methods: {
changeUpload (file, fileList) {
console.log(file)
// 判断图片大小
if (fileList[0].size < 1100000) {
// 判断图片格式是否为jpg,png,jepg,gif
var fileName=fileList[0].name
// var suffixIndex=fileName.lastIndexOf(".")
// var suffix=fileName.substring(suffixIndex+1).toUpperCase()
var suffix = fileName.substring(fileName.lastIndexOf(".")+1).toUpperCase()
if (suffix=="BMP"||suffix=="JPG"||suffix=="JPEG"||suffix=="PNG"||suffix=="GIF") {
this.fileList = fileList
this.$nextTick(
() => {
var i = this.imgN
let uploadLists = document.getElementsByClassName('el-upload-list')
let uploadListsN = uploadLists[i]
let uploadListLi = uploadListsN.children
uploadListsN.setAttribute('style', 'position: absolute;height: 160px;margin-top: 0;margin-left: 300px;width: 260px;overflow: hidden')
let liA = uploadListLi[0]
// 试着获取bolb里面的数据------------S
//获取图片的Blob值
function getImageBlob(url, cb) {
var xhr          = new XMLHttpRequest()
xhr.open("get", url, true)
xhr.responseType = "blob"
xhr.onload       = function() {
if (this.status == 200) {
if(cb) cb(this.response)
}
}
xhr.send()
}
function preView(url){
let reader    = new FileReader()
getImageBlob(url, function(blob){
reader.readAsDataURL(blob)
})
reader.onload = function(e) {
// 获取bolb里面数据时,生成预览
var img = document.createElement("img")
img.src = e.target.result
// 获取bolb里面数据时,生成预览
let imgElement = document.createElement('img')
imgElement.setAttribute('src', fileList[0].url)
imgElement.setAttribute('style', 'max-width:100%;padding-left:0')
if (liA.lastElementChild.nodeName !== 'IMG') {
liA.appendChild(imgElement)
}
// 把base64的信息放到imgthing的file里
file.base64 = e.target.result
}
}
preView(fileList[0].url)
// 试着获取bolb里面的数据-------------E
// 不获取bolb里面数据时,生成预览
// let imgElement = document.createElement('img')
// imgElement.setAttribute('src', fileList[0].url)
// imgElement.setAttribute('style', 'max-width:100%;padding-left:0')
// if (liA.lastElementChild.nodeName !== 'IMG') {
//   liA.appendChild(imgElement)
// }
}
)
// 修改nameN名字对应的数据,在一个页面使用多个不同字段图片上传，为了复用组件
if (this.nameN === 'identityCard_Z') {
this.imgthing.identityCard_Z = file
}
if (this.nameN === 'identityCard_F') {
this.imgthing.identityCard_F = file
}
if (this.nameN === 'identityCard_S') {
this.imgthing.identityCard_S = file
}
this.$emit('imgthing', this.imgthing)
} else {
this.$message.error('文件类型不正确,请重新上传！')
}
} else {
this.$message.error('图片大小超过1M,请重新上传')
}
}
}
}
// 上传
.upload-demo{width:260px;height:160px;
.upload_btn{width:260px;height:160px;background:#f2f2f2}
.el-upload__tip{margin:0;float:left}
}
父组件上传demo
提 交 资 质
import RegShopImg from '@/components/common/regShopImg' //上传图片的子组件
import Qs from 'qs' // post方式下引入qs插件字符串化传输信息
export default {
name: 'regShop',
data () {
return {
active: 3, // 分步骤走的判定
ajaxRegisterUrl: '', // 注册提交页面
imgN: '', // 上传信息的名字对应的index序号
nameN: '', // 上传信息的名字
identityCard_Z: 'identityCard_Z',
identityCard_F: 'identityCard_F',
identityCard_S: 'identityCard_S',
Imgthing: {}, //子组件上传的信息
ruleForm: { // 提交信息的表单对象
identityCard_Z: '',
identityCard_F: '',
identityCard_S: '',
},
rules: { // 必填判定规则
identityCard_Z: [
{required: true, message: '请上传身份证正面图片', trigger: 'blur'}
],
identityCard_F: [
{required: true, message: '请上传身份证反面图片', trigger: 'blur'}
],
identityCard_S: [
{required: true, message: '请上传手持身份证图片', trigger: 'blur'}
]
}
}
},
methods: {
// 第三步：证件照片上传
imgthing (imgthing) {
// 合并对象
this.Imgthing = Object.assign(this.Imgthing, imgthing)
// 填充到ruleForm对应项,用来判断是否有数据
this.ruleForm.identityCard_Z = this.Imgthing.identityCard_Z
this.ruleForm.identityCard_F = this.Imgthing.identityCard_F
this.ruleForm.identityCard_S = this.Imgthing.identityCard_S
},
// 总表单提交
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 由于base64的数据流比较大,get方式放不下,必须采用post方式
let data = Qs.stringify(this.ruleForm)
this.$ajax.post(this.ajaxRegisterUrl, data)
.then((res) => {
console.log(res)
if (res.status === 1) {
this.$message.success('恭喜您,注册成功！')
}
})
} else {
this.$message.error('提交资料有误,注册失败！')
return false
}
})
}
},
components: {
'RegShopImg': RegShopImg
}
}
多添加了一个base64的数据
另一种思路是利用element已有的方式，将图片上传和表单上传分开。
图片上传只上传文件，利用上传成功handleAvatarSuccess(res, file)的方法，获取后端对上传图片存储位置的路径，并将其传给父组件。提交表单的时候，提交图片部分仅仅是路径。
参考文档：

1.安装elementUI：npm i element-ui -S
2.引入elementUI组件(main.js文件)
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element, { size: 'small' })
3.访问Element官网【组件–Upload上传】
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
  
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
4.我的需求：点击保存按钮手动上传，只能上传一张图片，参数为userId
5.script中的data( )和methods( )如下：
export default {
data() {
return {
file:'',
dialogImageUrl: '',
dialogVisible: false,
imgUrl:'',
userId: '',
uid:'',
// 上传图片时附带的额外参数userId
resData:{
userId: window.localStorage["userId"]
},
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 点击保存按钮上传图片
submit2:function(res){
this.$refs.upload.submit();
},
// 图片上传成功后，后台返回图片的路径
onSuccess:function(res){
// console.log(res);
if(res.status==200){
this.imgUrl=res.data.imgUrl;
}
},
}
}
6.该组件的效果图如下：
本文来源于网络：查看 >https://blog.csdn.net/weixin_39378691/article/details/83655052

const tbit = require('../tbit')
// const filebtn = require("./filebtn")
import filebtn from "./control/filebtn"
import pager from "./control/pager.vue"
export default {
mounted:function (){
var me = this
// this.a()
this.admin = localStorage.username
this.query()
},
components:{
"filebtn":filebtn,
"pager":pager
},
methods:{
query(){
this.internalquery(this.search || "",this.page||1)
},
async internalquery(search,page){
var me = this
this.page = page
var query = `{user_list(page:${this.page},id:"${search}"){id,username,address,telephone,email,time,OnuId,ONUname,plan,TariffPackageId,actualtime}}`
var response = await tbit.ql(query)
this.items = response.data.data.user_list
query = `{user_pages(search:"${search}")}`
var response = await tbit.ql(query)
this.pages = response.data.data.user_pages
},
//导出
async doExport(){
var query = `{download_user{filename,mimetype,content}}`
let response = await tbit.ql(query)
let filename = response.data.data.download_user.filename;
let content = response.data.data.download_user.content;
this.downloadFile(filename, content);
},
downloadFile: function(fileName, content) {
const blob = this.base64ToBlob(content); // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
},
base64ToBlob: function(code) {
const parts = code.split(";base64,");
const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},
closeUploadModal:function() {
let modal = document.getElementById("UploadModal");
modal.classList.remove("is-active");
},
doImport:function() {
if(confirm('Whether or not to import users')==true){
let modal = document.getElementById("UploadModal");
modal.classList.add("is-active");
}
},
//导入
handlerUpload: async function(e) {
//获取选定的文件
var self = this
let tFiles = e.target.files;
let len = tFiles.length;
if (len != 1) {
alert(this.$i18n.t("Only one file can be uploaded"));
return;
}
//将文件转base64
let reader = new FileReader();
reader.readAsDataURL(tFiles[0]);
reader.onload = async function(e) {
let query = `mutation{upload_user(fileContent:"${this.result}")}`;
let response = await tbit.ql(query);
if (response.data.data.upload_user == true) {
alert("success");
let model = document.getElementById("UploadModal");
model.classList.remove("is-active");
document.getElementById("file").value='';
await self.query()
} else {
alert("upload file fail");
document.getElementById("file").value='';
}
};
},
},
data:function (){
return {items:this.items,pages:1,page:1,search:"",money:this.money,username:"",actualincome:"",createdAt:"",address:"",telephone:"",admin:"",refundtime:""}
}
}
title
{{$t("Upload configuration")}}
 {{$t("Click for upload a file")}}
.uploadBox {
width: 400px;
border: 1px solid #ccc;
margin: 100px auto;
}
.fileBox,
.fileInfo {
margin: 16px;
height: 60px;
line-height: 60px;
border: 1px solid #ccc;
padding-left: 16px;
font-size: 16px;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
/*E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/
.inputfile+label {
color: #3e97df;
display: inline-block;
}
.inputfile:focus+label,
.inputfile+label:hover {
color: #0c89f0;
cursor: pointer;
}
h3 {
padding: 10px 0 0 16px;
font-weight: normal;
font-size: 18px;
color: #666;
}
.filePart {
line-height: 30px;
overflow: hidden;
float: left;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
height: 30px;
}
.fileStatus {
overflow: hidden;
float: left;
height: 20px;
font-size: 10px;
line-height: 20px;
}
.ml10 {
margin-left: 10px;
}
.fileName {
width: 200px;
}
.fileSize {
width: 120px;
text-align: center;
}
.uploadFail {
color: #ff0800d3;
}
.uploadSuccess {
color: #2c832c;
}
/*对应CSS*/
.progress {
position: relative;
width: 80%;
height: 8px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
/*注意这里*/
box-shadow: 0 0 1px 0px #ddd inset;
}
.progress span {
position: absolute;
display: inline-block;
width: 10%;
height: 100%;
background-color: #3e97df;
}

vue中利用ref属性实现隔山打牛
效果图:


利用ref属性来实现隔山打牛
页面代码:
<button ref="me" @click="aa">我是aa</button>
<button @click="bb">隔山打牛</button>

js方法:
aa(){
      alert('我是aa');
    },
bb(){
      // 点我出发aa事件
      this.$refs.me.click();
    }

如果文章对你有帮助,麻烦点个赞,谢谢~