vue2+elementui上传照片(el-upload 超简单)

news2024/11/17 5:33:15

在这里插入图片描述

文章目录

element上传附件（el-upload 超详细）
代码展示
- html代码
- data中
- methods中
- 接口写法
总结

element上传附件（el-upload 超详细）

这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload
展示：
在这里插入图片描述

代码展示

html代码

 <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" action=""
                        :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList"
                        :http-request="httpRequest">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

data中

 fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]

methods中

 //实现图片上传功能
        httpRequest(item) {
            // var imgId = item.file.lastModified
            console.log(item.file.name);
            this.fileList[0].name = item.file.name
            var formData = new FormData()
            formData.append('file', item.file)
            // {
            //         // 设置请求头为 multipart/form-data
            //         headers: {
            //             'Content-Type': 'multipart/form-data'
            //         },
            //         // // 上传进度
            //         // onUploadProgress: progressEvent => {
            //         //     let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
            //         //     //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
            //         //     item.onProgress({ percent: percent })
            //         // }
            //     }
            upload(formData)
                .then(res => {
                    this.fileList[0].name = item.file.name
                    console.log(res);
                })
                .catch(() => { })
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },

接口写法

// 上传图片
export function upload() {
  return request({
    url: '/upload',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  })
}