element ui图片上传
时间: 2023-10-26 08:05:40 浏览: 114
element ui图片上传组件可以通过使用Vue和Element UI库来实现。使用该组件可以实现后台上传图片的功能。具体实现方法有两种方式:一是使用action自动上传,二是使用http-request方法上传。你可以根据自己的需求选择其中一种方法来实现图片上传。
方式一:使用action自动上传
```html
<el-upload :action="uploadFileUrl" ref="upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :limit="10" :headers="headers" :on-exceed="handleExceed" :file-list="formData.fileList">
<i class="el-icon-plus"></i>
</el-upload>
```
方式二:使用http-request方法上传
```html
<el-upload action="#" ref="upload" list-type="picture-card" :http-request="UploadImage" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :limit="10" :on-change="handleChange" :on-exceed="handleExceed" :file-list="formData.fileList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
```
以上是element ui图片上传组件的使用方法,你可以根据需要选择其中一种方式来使用。希望这些信息对你有帮助。
阅读全文