Vue 使用 element-ui组件中 el-upload 上传图片

默认已经引进  element-ui 组件

简单的使用可查看官方API

列出自己在使用中遇到的问题

无法在手机中使用

刚开始用下面的语句限制上传文件的类型

accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"

 下面的代码，在pc端使用是可以正常使用，但在手机端使用时，显示不支持

 
            
            
将文件拖到此处，或点击上传
            
只能上传jpg/png文件，且不超过500kb

解决方法：

将  上面的 accept   改为  下面的形式

:accept="'image/*'"

就可以使用了

 

上传图片给服务端

必要的参数

1. name值                     //后端接收用
2. :auto-upload="false"  //false为选取图片后不上传，true为选取图片后立即上传
3. action="src"               //上传后端的地址
4. ref="icon"                   //用于手动上传时的元素标记：

代码示例：

            
            
将文件拖到此处，或点击上传
            
只能上传jpg/png文件，且不超500kb

点击上传图片 



 export default {
        name: "register", 
        methods: {
          submitForm() {
             //submit()方法既是通知  el-upload 上传图片
             this.$refs.icon.submit();   //this.$refs.icon 是上面定义的  ref="icon"
           }
        }



}

后台接收代码（php）

下面的代码，就能将   el-upload 上传的图片保存在 img_logo 文件夹下

$_FILES['infos']中的 infos 是 el-upload  中定义的 name="infos"

//b.php