upload实现多文件上传element-ui

直接上传，不做裁剪的情况

                   <el-upload
                        id="upload"
                        ref="upload"
                        multiple
                        action=""
                        list-type="picture-card"
                        :http-request="uploadFile"
                        :auto-upload="false"
                        :file-list="this.fileList"
                    >
                        <i
                            slot="default"
                            class="el-icon-plus"
                        ></i>
                        <div slot="file" slot-scope="{ file }">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url"
                                alt=""
                            />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                >
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file)"
                                >
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt />
                    </el-dialog>
               <el-button @click="finish">上传</el-button>

<script>
export default {
    name: "",
    data() {
        return {
            dialogImageUrl: "", 
            dialogVisible: false,
            disabled: false,
            fileSizeIsSatisfy: false,
            fileList: [],
            fileData: [],
            }，
    methods:{
             handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
             this.dialogImageUrl = file.url;
             this.dialogVisible = true;
        },
        finish: function () {
            this.fileData = new FormData();
            this.$refs.upload.submit();
            this.$axios
                .post("http://请求的地址", this.fileData)
                .then((res) => {
                    console.log(res);
                    if (res.status == 200) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                    }
                });
        },
        uploadFile: function (file) {
            this.fileData.append("file", file.file);
        },
            }
}
</script>

nodejs如何处理多文件并存入数据库的

nodejs下载multer依赖
在util文件夹下新建multerCtr.js

var multer = require('multer');
var storage = multer.diskStorage({
    //设置上传后文件路径，uploads文件夹会自动创建。
    destination: function(req, file, cb) {
        cb(null, './public/uploads')
    },
    //给上传文件重命名，获取添加后缀名
    filename: function(req, file, cb) {
        var fileFormat = (file.originalname).split(".");
        cb(null, file.fieldname + '-' + Date.now() + fileFormat[0] + "." + fileFormat[fileFormat.length - 1]);
    }
});
//添加配置文件到muler对象。
var upload = multer({
    storage: storage
});

//导出对象
module.exports = upload;

　这属于公共方法，可以直接引用。需要注意的一点，多文件上传只加上Date.now()是不够的，因为这样会出现文件重名的状况，所以需在后面拼接上fileFormat[0]，这样就能解决文件重名

    然后在controller层直接引用这个文件就可以了

const { connect } = require('../../config/connMysql');
const myMulter = require('../../util/multerHly');
//创建多文件上传的方法,第一个参数为前台upload标签里的name值，第二个参数限制文 
   件个数
var uploadList = myMulter.array('file', 10)
module.exports = {
    loadImages(req, resp) {
        //上传多文件
        uploadList(req, resp, (err) => {
            let imagesArr = [];
         //遍历req.files去除前缀，然后push到数组里
            req.files.forEach((item, i) => {
                imagesArr.push(item.path.replace(/public\\/, ""))
            });
          //将数组转换成字符串并存入数据库
            let files = imagesArr.join();
            let sql = 'update companyinfomation set cif_imgs=? where id=?';
            let arr = [files, 1];
            connect(sql, arr, (err, data) => {
                if (!err) {
                    resp.send({ code: 200, msg: '上传文件成功' })
                } else {
                    resp.send({ code: 500, msg: '上传文件失败' })
                }
            })
        })
    },
}

标签：文件,req,upload,element,ui,file,上传,fileFormat
来源： https://www.cnblogs.com/mitoo/p/15763662.html