element即时上传图片并保留在页面中

1、使用el-upload

                <el-form-item  label="轮播图4：" prop="photo">
                    <el-upload
                            action=""
                            :limit="1"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
                            :auto-upload=false
                            list-type="picture-card"
                            :on-change="onchange"
                            :on-remove="handleRemove"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

将action设置为空，auto-upload自动上传设置为“false”，我们的自动上传放在onchange里，在upload标签发生变化时（即上传了图片），在onchange函数里实时将图片传到后台

2、设置data

 data() {
          return {
            form: {
              name: ''
            },
             param:"",//表单要提交的参数
             dialogImageUrl: '',
             dialogVisible: false,
             src: ''
          }
        }

3、在onchange里新建表单formData

          onchange(file,filesList) {
                this.param = new FormData();
                this.param.append('img', file.raw, file.name);  //图片信息
                this.param.append('name', "abc");       //接口所需其余字段
                this.imgSubmit();
          }

4、设置imgSubmit，使用axios提交接口

 axios.post('/img',image_property)
                       .then(function (res) {
                           console.log("success",res.data);
                       }).catch(function (err) {
                           console.log("error",err)
                       })

最终效果