elementui怎么实现图片上传到后端

① vue 使用element-ui的el-upload httprequest实现上传文件到后台的功能

之前做上传，参考element UI的官方示例，使用action属性，action是上传的地址。
这次做的项目，换了一个后端对接，说，上传不需要调用接口，我懵了，我寻思示例不都是使用了action嘛，经过一番了解，upload组件还提供了http-request覆盖默认上传行为。

elementUI 的upload组件的http-request方法的使用

http-request有个默认的参数：content
content是一个object对象：里面包含一些upload组件的回调方法，可以使用upload组件原生的方法。

下面记录下具体使用方法，很简单
1、

:action是必不可少但是却没什么作悄颤用的

:http-request可以覆盖默认的上传方法

2、我配置中兄的:action的值（就是官方文档示卖运袭例的值）

3、:http-request函数内容，将上传成功的文件保存到mode里面，mode是自己在data里面定义的变量，初始值是mode:{}

4、上传按钮的点击事件

5、上传成功，后台可以读取到数据

② vue + elementui upload上传图片到服务器以及保存后回显问题

前言：
关于键镇vue和elementui安装导入使用不做介绍

1.template中首先展示upload多张图片上传

2.当稿悄粗upload组件发生改变时处罚addFile

3.图片提交到服务器，拿到服务器的数据地址

3.显示图片 将拿到的数据放进一个数组中显示到file-list中去就好了

至此，完结。
有运猛不对的地方欢迎指导哦。

③ 如何使用element-ui的upload组件实现上传文件到七牛

具体实现

1. 在创建存储空间的时候，可以选择私人空间，但是图片的外链访问都需要秘钥，公共空间则不需要。

   

2. 生成token后，就可以实现上传了。

④ element ui之图片上传以base64的格式传给后端

        upload上传组件默认以文件流的方式传给后端，如果需要改变文件格式，则要设扒腔圆置auto-upload="false"阻止自动上传，使用on-change方法获得上传的文件并进行相应的处理。圆梁具体流程如下：

        写一个getBase64方法，将文件格式转化春塌为base64。

            在上传文件变化时，调用getBase64方法 获取转化后的base64数据。

⑤ vue element-ui 上传图片到oss阿里云(第三方服务)

一、阿里云设置：

8.1 进入 OSS 管理控制台 界面。

8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。

8.3 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。

8.4 单击 创建规则，打开 设定跨域规则 对话框。

8.5 设置跨域规则。

8.6 单击 确定。
说明： 您也可以对已有的规则进行编辑和删除操作。

截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。

二、安装使用：

⑥ vue2.x，element-ui 中上传图片组件（图片查看，已有图片渲染）

1、基本标签结构

<el-upload name="picture" 

            :action="'/api/image/upload?imageType=xxx" 

            accept=".jpg, .png"      

            list-type="picture-card" 

           :limit="1"    

           :file-list="filelists"

            :on-exceed="onExceed" 

     并饥       :before-upload="beforeUpload"  

            :on-preview="handlePictureCardPreview"      

            :on-success="imagesuccess"   

            :on-remove="handleRemove">

            <i class="el-icon-plus"></i>  

 </el-upload>

<!--预览-->

<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="预览">

                <img width="100%" :src="imagePreviewUrl" alt="">

</el-dialog>

方法示例：

onExceed(files, fileList) { 

                this.$message({

                        type: 'info',

                        message: '最多只能上传一个图片',  

                        ration: 6000

                });

},

beforeUpload(file) {

                const isJPG = file.type === 'image/jpeg'  

              轿蔽宏  const isGIF = file.type === 'image/gif'  

                const isPNG = file.type === 'image/png'

                const isBMP = file.type === 'image/bmp' 

                const imgSizeLimit= file.size  < 1*1024*1024;

                if (!isJPG && !isGIF && !isPNG && !isBMP) {

             闭册        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!'); 

                }

                if (!imgSizeLimit) { 

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

                }

                return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit;                                                                                                                           }, 

handlePictureCardPreview:function(file){

        //todo

 },

imagesuccess:function(response, file, fileList){

         //todo

         this.filelists  = [];

          this.filelists  = [file]

 },

handleRemove:function(file, fileList){

           //todo

 },

2、action为后台上传图片接口

      file-list为文件列表

      limit为设置的可上传文件的最大个数

      onExceed上传的文件个数超出设定时触发的函数，参数为上传的文件file和文件列表 filelists  

      beforeUpload文件上传前执行，参数为上传的文件file，如果返回false或者返回Primary且被reject，则停止上传

      handlePictureCardPreview图片预览时触发，参数为上传的文件file，

      imagesuccess图片上传成功时触发参数response, file, filelists  

      handleRemove移除图片时触发，参数为file, filelists  

3、已有图片渲染问题：

自己在实际开发过程中，会遇到编辑情况，并且已经存在一张图片，想要放到图片组件中，可以调用组件里声明的方法。

由于是新手，组件使用不熟练，所以我将图片的显示与上传等操作分离，单独自己去展示，上传时再使用组件上传，使用组件的:show-file-list="false"属性来隐藏组件自带的图片展示功能。

后来发现自己可以自己初始化filelists列表，来使已存在的图片文件放入组件中，放入的对象当然时文件，但是我后台只有图片地址，如何拼出一个file格式对象来呢？通过debug，我发现上传的文件格式对象有好多属性，当然，存在url这个属性就可以通过组件进行展示。最简单的一种方式就是直接创建一个只有一个url属性的对象var file = {     url:this.showDetailForm.profilePhotoPath     }    this.filelists.push(file)  然后push到文件列表，就可以在组件中进行渲染，对图片的操作可以使用声明的方法+表单属性来实现业务的全过程（当然，这样渲染的文件只有url，没有其他属性，比如文件大小，涉及到其他属性的函数都没办法调用）

⑦ element UI使用Upload 上传视频，图片

elementUI中 upload 的地址： https://element.eleme.cn/#/zh-CN/component/upload  大家可以参考官方文档

这里我使用的是照片墙这个属性：list-type

```javascript

<el-upload

  name="fileUpload"//上传文件的字段名字由后台提供

  :data="folderName"//文件存储的文件夹

  :action="这里的接口是后台提供的"

  list-type="picture-card"

  :on-success="successUpdata"

  :on-preview="handlePictureCardPreview"

  :on-remove="handleRemove">

<i class="el-icon-plus"></i>

</el-upload>

data{

folderName: {folderName:'ycylManage'},

}

methods: {

handleRemove(file, fileList) {

console.log(file, fileList);

},

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible =true;

},

//上传成功的方法

successUpdata(file){

this.headImg = file.paths[0]   //返回的是图片的路径

},

图片示例：

经过滑培试验这个上信睁唯传是可以上传早孝视频的，所以推荐大家用这个，上传图片与上传图片是一样的