前端 图片上传

场景：图片上传zimg图片服务器，web服务返回html格式结果


action提交(action地址为zimg服务器地址)，同源策略问题，没有办法获取到iframe里面的服务器返回内容，看了一下window,postmessage，好累，先放着吧

<iframe src="" frameborder="0" name="iframeContent" @load="testIframe" ref="frameContent"></iframe>
<form action="http://xxx.xxx.0.233:4869/upload" target="iframeContent" enctype="multipart/form-data" method="post">
  <input type="file" ref="file" name="userfile" @change="handleAvatarSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  <input type="submit" value="测试">
</form>

 

ajax提交（直接提交zimg会有跨域问题），直接访问后台服务器地址，后台再去做一个反向代理，解决zimg的跨域问题

<input type="file" ref="file" name="userfile" @change="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<input type="button" @click="test" value="测试">

//图片显示
handleAvatarSuccess(res) {
  this.imageUrl = URL.createObjectURL(this.$refs.file.files[0]);
},

test(){

  var formData=new FormData();
  formData.append('userfile',this.$refs.file.files[0]);
  axios({
    baseURL:'http://xxx.xxx.0.134:8087',
    url:'/upload',
    method:'post',
    data:formData
  }).then((res)=>{
    //返回结果为html内容，结果为字符串，转为dom
    let odiv=document.createElement('div');
    odiv.innerHTML=res.data;
    let text=odiv.getElementsByTagName('h1')[0].innerText;
    let md5=text.split(':')[1].replace(/\s/g,'');
  }).catch((err)=>{

  })
},