Vue+Element-UI 上传图片,打开相机,相册

Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是文件列表,而不是相机\相册按钮。

解决方法

例如在如下一个普通的upload组件中,

<el-upload
  class="avatar-uploader"
  accept="image/*"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

只需要添加accept="image/*"属性,就可以完美解决问题了,浏览器会识别出这个标识,显示出相机\相册的按钮。

Logo

前往低代码交流专区

更多推荐