精华内容
下载资源
问答
  • 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能。 二、环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三、正文 在客户开发一套门户管理...
  • 项目中用的element 的框架,然后在项目有一个添加数据需求是图片上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式 ...
  • 2020-09-21 22:05:37来源:脚本之家阅读:92作者:Ajaxguan本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下import Vue from 'vue'/*** 图片上传* 已注入所有Vue实例,* template...

    Vue formData实现图片上传

    发布时间:2020-09-21 22:05:37

    来源:脚本之家

    阅读:92

    作者:Ajaxguan

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下

    import Vue from 'vue'

    /**

    * 图片上传

    * 已注入所有Vue实例,

    * template模板里调用 $uploadFile(id)

    * 组件方法里调用 this.$uploadFile(id)

    */

    const uploadFile = (id) => {

    let promise = new Promise((resolve, reject) => {

    let file = null

    let el = null

    let i = 0

    let formData = new FormData()

    document.getElementById(id).click()

    el = document.getElementById(id)

    el.addEventListener('change', function (e) {

    i++

    if (i !== 1) {

    return false

    } else {

    file = this.files[0]

    formData.append('file', file)

    formData.append('fileType', 'IMAGE')

    // 数据请求

    Vue.axiosfrom(Vue.api.upload, formData).then(res => {

    // 返回图片url

    resolve(res)

    }).catch(err => {

    reject(err)

    })

    }

    })

    })

    return promise

    }

    Vue.prototype.$uploadFile = uploadFile

    axios请求头设置

    import Vue from 'vue'

    import { baseURL } from '@/config/env'

    import axios from 'axios'

    // formdata 请求

    const axiosT = axios.create({

    baseURL: baseURL,

    headers: {

    'Content-Type': 'multipart/form-data'

    }

    })

    const XHR = ({method = 'post', qs = true, loading = false, loginRequire = true, reqComplex = false, reqContentType = 'urlencoded'}) => {

    // 带请求进度条成功方法

    const sucFunX = res => {

    return res.data

    }

    // 成功执行方法

    const sucFunC = res => {

    return res.data

    }

    // 带请求进度条失败方法

    const errFunX = err => {

    console.log(err, NProgress.done())

    }

    // 失败执行访求

    const errFunC = err => {

    console.log(err)

    }

    // 判断是否需要Longing

    const sucFun = loading ? sucFunX : sucFunC

    // 判断是否需要Longing

    const errFun = loading ? errFunX : errFunC

    return {user, sucFun, errFun}

    }

    // 表单请求 图片上传

    const axiosfrom = function (url = '', data = {}) {

    let {sucFun, errFun} = XHR({loading: false})

    return axiosT.post(url, data).then(sucFun).catch(errFun)

    }

    // 表单请求

    Vue.prototype.$axiosfrom = axiosfrom

    Vue.axiosfrom = axiosfrom

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

    展开全文
  • 组件 <van-uploader v-model="uploader" :max-count="1" ref="imgInstance" :after-read="onRead" :before-delete="onDelete /> 参数设置 data () { return { fileData: null, ...onRea.

    组件 

    <van-uploader v-model="uploader" :max-count="1" ref="imgInstance" :after-read="onRead" :before-delete="onDelete />
                      

    参数设置

    data () {
        return {
            fileData: null,
            uploader: [],    
        }
      },

    onRead方法:

    onRead (file) {   
    	  this.fileData = file.file;
    	  return true;
    	},

    onDelete方法(删除选中的文件)

    onDelete(file, info){
            //this.fileData.splice(info.index, 1);//根据图片索引进行删除
            //因为我是一张图片,只需要把它置为空
            this.fileData=null;
    	    return true;
    	},

    数据封装上传

    onHandle(){
    let formData = new FormData()
    //文件
    formData.append('file', this.fileData);
    //表单参数
    formData.append(key,value);
    },
    this.$http({
                  method: 'post',
                  url: XXXXXXXXXXXX
                  headers:{ 'Content-Type': 'multipart/form-data'},
                  transformRequest:[],
                  data: formData
          }).then(res => {
        }).catch(()=>{
    });
    

    后端接口

     @PostMapping("/appInviteOne")
     public Result appInviteOne(@RequestParam(value = "file") MultipartFile file, Map<String,String> params){
            return  new Result();
        }

     

    展开全文
  • 踩坑记录:vue-cli 3 跑项目时卡在after emitting CopyPlugin 卡在98%。 原因:require() 图片里面为空!!!后来者注意这一点 上干货:主要实现新增一条目录 html <!-- 新增模板弹窗控制 --> <el-...

    踩坑记录:vue-cli 3 跑项目时卡在after emitting CopyPlugin 卡在98%。
    原因:require() 图片里面为空!!!后来者注意这一点

    上干货:主要实现新增一条目录

    html

     <!-- 新增模板弹窗控制 -->
                  <el-button type="success" @click="visible = true"
                    >添加模板</el-button 
    <!-- 新增模板弹窗 -->
        <el-dialog :visible.sync="visible" title="新增模板">
          <!-- 新增模板内容代码 -->
          <el-form ref="form" :model="form" label-width="auto" id='fromAdd'>
            <el-form-item label="内容类型:">
              <el-select
                v-model="form.content"
                placeholder="请选择内容类型"
              >
                <el-option label="图片" value="img"></el-option>
                <el-option label="视频" value="void"></el-option>
                <el-option label="互动视频" value="interaction"></el-option>
                <el-option label="跟读" value="followup"></el-option>
                <el-option label="习题" value="exercises"></el-option>
                <el-option label="游戏" value="game"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板类型:">
              <el-select
                v-model="form.modelType"
                placeholder="请选择模板类型"
              >
                <el-option label="单选" value="single"></el-option>
                <el-option label="多选" value="multiple"></el-option>
                <el-option label="连线" value="connection"></el-option>
                <el-option label="拖拽" value="drag"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板名称:">
              <el-input
                v-model="form.modelName"
                placeholder="请输入模板名称"
              >
              </el-input>
            </el-form-item>
            <!-- 上传图片代码开始 -->
            <el-form-item label="上传图片:" ref="uploadElement" prop="imgSrc">
              <el-input v-model="form.imgSrc" v-if="false"></el-input>
              <el-upload
                class="avatar-uploader"
                ref="upload"
                :show-file-list="false"
                action="/index/upload"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :auto-upload="false"
                :data="form"
              >
                <img
                  v-if="form.imgSrc"
                  :src="form.imgSrc"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- 上传图片代码结束,后续改进 -->
            <el-form-item>
              <el-button type="primary" @click="submitForm('form')">保存</el-button>
              <el-button @click="resetForm('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 新增模板弹窗代码结束 -->

    js

    export default {
      name: "",
      //data用于定义数据,进行数据初始化
      data() {
        let i = 0;
        //定义数据
        //定义表格初始数据
        const item = {
          date: ++i,
          name: "习题",
          address: "单选",
          addname: "点击单选",
          coverimg: require("../../public/img/black.jpg"),
          operation: "",
        };
        //对于表格数据进行重新赋值
        item.date = ++i;
        //输出数据
        return {
          AsideHeight: window.screen.height,
          imgArray: [
            {
              imgHttp: require("../../public/img/black.jpg"),
            },
            {
              imgHttp: require("../../public/img/girl.png"),
            },
          ],
          //    tableData: Array(20).fill(item),
          //表格数据渲染,后续换成接口数据,现在为模拟数据
          tableData: [
            {
              name: "习题",
              address: "单选",
              addname: "点击单选",
              coverimg: require("../../public/img/black.jpg"),
            },
            {
              name: "习题",
              address: "单选",
              addname: "点击单选",
              coverimg: "",
            },
          ],
          //弹窗控制,进行各个弹窗的展示
          visible: false,
          //表单结构,用于控制弹窗表单数据
          form: {
            content:"",//内容类型
            imgSrc: "",//图片
            modelType:"",//模板类型
            modelName:"",//模板名称
          },
        };
      },
      methods: {
        //更新表格数据
        updataTb: function (e) {
          console.log(e);
        },
        //添加表格数据
        addTb: function () {},
        //删除表格数据
        deleteTb: function () {},
    
        // 表单保存按钮代码实现,后续实现用ajax实现数据提交
        submitForm(formName) {
          console.log(this.form);
          let vm = this;
          //上传数据前进行表单验证,
          this.$refs[formName].validate((valid) => {
            if (valid) {
              vm.$refs.upload.submit();
            } else {
              return false;
            }
          });
        },
        //点击取消按钮执行,清空未提交数据,不对端上传值,关闭弹窗
        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.form.content="";
          this.form.imgSrc="";
          this.form.modelType="";
          this.form.modelName="";
          this.visible=false;
        },
        //文件状态改变执行,实现表单提交前图片预览功能
        handleChange(file, fileList) {
          console.log(fileList);
          this.form.imgSrc = URL.createObjectURL(file.raw);
        },
        //文件上传前执行,把值变为true,当值为false时停止上传
        beforeUpload(file) {
          console.log(file);
          return true;
        },
      },
    };

    展开全文
  • vue图片上传formdata

    2021-01-13 16:58:48
    isBMG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } if (isBMG && isLt2M) { this.params = new FormData() this.params....

    template里面:

    class="avatar-uploader"

    action="uploadeurl"

    :show-file-list="false"

    :before-upload="beforeAvatarUpload">

    data数据格式:

    data() {

    return {

    imageUrl:'',

    uploadeurl: 'http://192.168.10.25:3010/employee/add',

    form: _.cloneDeep(baseType),

    rules: {

    factory: [

    {required: true, message: '请输入姓名'}

    ],

    companyName: [

    {required: true, message: '请输入员工职务'}

    ],

    },

    loading: false,

    params: {},

    }

    },

    methods方法里面

    methods: {

    beforeAvatarUpload(file) {

    const isBMG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg', 'image/raw',].includes(file.type)

    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isBMG) {

    this.$message.error('上传头像图片只能是 JPG 格式!');

    }

    if (!isLt2M) {

    this.$message.error('上传头像图片大小不能超过 2MB!');

    }

    if (isBMG && isLt2M) {

    this.params = new FormData()

    this.params.append('image', file, file.name)

    }

    return false

    },

    }

    ajax请求:

    save() {

    const params = {

    name: this.form.name,

    job: this.form.job,

    deportment: this.form.deportment,

    joinAt: this.form.joinAt,

    chiaotNum: this.form.chiaotNum,

    id: this.form.id,

    },

    permission = {

    1: '/addCustomer',

    2: '/editCustomer'

    }

    **循环追加**

    let key=0

    for (key in params) {

    this.params.append(key, params[key])

    }

    console.log(this.params)

    this.$set(this.$data, 'loading', true)

    this.$store.dispatch(`${storePacks.CUSTOMER}${permission[this.modalType]}`, this.params)

    .then(({code, message}) => {

    if (code !== 1) return this.$message({message: message, type: 'error'})

    this.$message({message: message, type: 'success'})

    this.close()

    this.$store.dispatch(`${storePacks.CUSTOMER}/getList`)

    })

    .catch(err => {

    })

    .finally(() => {

    this.$set(this.$data, 'loading', false)

    })

    },

    参考链接

    展开全文
  • Vue实现表单上传图片,不多BB直接上效果图! PC端实现效果: 手机端效果: 前言:非专业前端,写的界面比较丑。大家大致看看就行。因为公司新项目需要做一个新平台。小公司人力有限,在云端界面功能开发又再一次...
  • 之前上传图片都是先通过接口将/xxx/xx/xxx(图片本地路径)传递给后端,后端将图片上传至oss,然后返回线上地址,然后我在展示,后来说考虑网络带宽,资源消耗,上传改成页面上传,提交表单的时候,直接给后端返回线上...
  • 我们就以Vue、Element-ui,封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路。1.云储存常见的 七牛云,OSS(阿里云)等,这些云平台提供API接口,调用相应的接口,...
  • ant design vue 的form表单上文件上传组件利用v-decorator相关属性赋初始值、上传文件、提交表单时获取数据 代码: 上传头像"> action="https://www.mocky.io/v2/5cc8019d300000980a055e76" ...
  • 起因 根据需求要实现一个视频上传功能,之前采用七牛云上传,小点...最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接 官网链接:cloud.tencent.com/document/product/266/9239#.E6.96.AD.E7.82.B9.
  • 由于我在提交表单时需要先向后端提交上传图片的申请,并存储图片到服务器,所以我采用axios的上传方式,elementui的upload直接可以通过自带的action属性请求后端上传图片,所以当我点击上传按钮时,首先执行upload的...
  • 1.图片上传模板 :action,必选参数,上传的地址,String类型。 :accept 文件上传类型 drag是否启用拖拽, :limit文件或者图片数量限制 multiple 是否支持多选文件 2、常用方法介绍 1、在实现自定义上传的:auto-...
  • 这个时候我们可以使用Element-UI的el-upload组件进行图片上传。 <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-...
  • 所用的技术栈:vue CLI3.x,elementUI 本文章只放了关键代码,和部分注意事项 1.html的代码 <!-- 对话框 该对话框在mounted时未被挂载--> <el-dialog title="title" :visible.sync="dialogFormVisible"> ...
  • 最近接到一个需求,对当前项目增加问题反馈功能,应对公司审计 。传统的vue上传组件,多张图片会提交多个请求到后台,这种显然不可取...el-form-item label="图片上传"> <el-upload action='/rest/problemFe...
  • <template> <div> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> 图片上传</el-breadcrumb-item> </el-breadcrumb> ...
  • 1.新增应用时时一个form 表单,其中一个是用户上传应用图标。 2.要求传给后端时以base64格式,需要前端转换。在上传时的chaneg事件里转,完整代码如下 <template> <j-page> <div slot="content"&...
  • vue 图片上传功能 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;file_box &quot;&amp;gt; &amp;lt;span class='upload'&amp;gt; &amp;lt;input type=&...
  • 总括:个人在项目开发中所遇到的问题总结,主要介绍两个知识点:①vue-resource如何实现表单提交。②file图片上传如何压缩,减少上传压力 vue中的代码 let that = this // 上传图片获取url console.log('没处理时...
  • 而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如何实现图片上传并提交到表单中,在table表格中回显照片。 本案例对应的开源项目地址请看我的...
  • 使用Vue实现图片上传的三种方式

    万次阅读 多人点赞 2019-03-06 19:26:48
    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景...
  • vue+tp5上传图片表单提交

    千次阅读 2018-08-17 14:23:06
    --这个组件主要用来研究upload这个elementui的上传插件组件--&gt; &lt;template&gt; &lt;el-row&gt; &lt;el-col :span="8" :offset="8"&gt; &lt;div id=&...
  • Vue+SpringBoot实现图片上传和回显

    千次阅读 2019-08-28 15:19:46
    点击上传,通过文件流的方式把图片上传至服务器,服务器将图片保存至指定位置,并根据时间生成指定名称,上传成功,返回新生成文件名。 服务器自定义接口,通过需要的文件名,返回指定文件流 上传图片成功后,在旁边...
  • Vue项目中最简单的使用集成UEditor方式,含图片上传

    万次阅读 多人点赞 2018-08-23 10:26:13
    前言 上图是UEditor的 百度指数 折线图。虽然今天已经是 2018 年...目前,UEditor官网的最后一次版本更新是 1.4.3.3,这已经是 2016 年的事情了,而今天的前端开发,很多小伙伴都在使用Vue,React 这种组件化的前端...
  • 用户可以选择图片,并回显出来,给按钮注册点击事件上传图片和文字参数。 二。代码 1.隐藏 file 输入框 2.将选择图片框上的注册事件 绑定带 file 文件框上 <div class="uploaditem"> <p>添加图片&...
  • vue + element-ui + springboot + 阿里云OSS 使用表单进行图片文件等的上传 使用vue + elementUI的前端页面中,使用el-upload组件,在添加,或者修改时。在表单中,加入图片。一起传给后台 springboot服务器,...
  • vue动态表单+图片投票

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,560
精华内容 1,824
关键字:

vue项目表单图片上传

vue 订阅