Node.js: express + MySQL + Vue realiza la carga de imágenes

Hace algún tiempo, hice un pequeño proyecto con Node.js: express + MySQL + Vue + componentes de elementos, y registré la implementación de la carga de imágenes.

Hay dos formas de almacenar imágenes en la base de datos:

1. Almacene la imagen en la base de datos como un flujo binario (la base de datos es fácil de mover y es relativamente segura, pero el consumo de espacio de la base de datos es grande y el acceso será relativamente lento)

2. Almacene la dirección de almacenamiento de la imagen en la base de datos.

Se introduce principalmente el segundo tipo.

1. Almacene la imagen en la base de datos como una secuencia binaria.

Convierta la imagen al formato base64 y utilice el tipo MEDIUMTEXT como tipo de datos.

O convierta la imagen a un tipo Blob guardado en la base de datos.

En segundo lugar, almacene la dirección de almacenamiento de la imagen en la base de datos.

1. Escribe la URL de la interfaz.

Se utilizará un middleware, Multer, para procesar multipart/form-data el tipo de datos del formulario, que se utiliza principalmente para cargar archivos: multer/README-zh-cn.md en master expressjs/multer GitHub

Multer agregará un objeto de cuerpo y un objeto de archivo o archivos al objeto de solicitud. El objeto de cuerpo contiene la información del campo de texto del formulario y el objeto de archivo contiene la información del archivo cargado por el formulario de objeto.

(Las dos carpetas enrutador y enrutador_handle significan que la ruta y el método de ejecución están separados para facilitar la administración. Para obtener más detalles, consulte Node.js: express + MySQL usando _express mysql_ blog del jugador tipo pérdida de cabello - blog CSDN )

Archivos bajo el enrutador

//引入multer
const multer = require('multer')
//磁盘存储引擎，可以控制文件的存储，省略的话这些文件会保存在内存中，不会写入磁盘
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        //控制文件的存储路径
        cb(null, 'image/avatar')
    },
    filename: function (req, file, cb) {
        //定义上传文件存储时的文件名
        cb(null, file.originalname)
    }
})
const upload = multer({ storage: storage })
//接受单文件上传
router.post('/update/avatar', upload.single('avatar'), userInfo_handler.updateAvatar)

Primero introduzca Multer, configure la dirección de almacenamiento y el nombre del archivo de la imagen, si se omite, el archivo cargado se guardará en la memoria y no se escribirá en el disco. Antes de cargar, cree una carpeta en el directorio raíz del proyecto para recibir el archivo cargado. Por ejemplo, la ruta de almacenamiento del archivo definido en mi código es cb (nulo, 'imagen/avatar'), y se debe crear una carpeta de imágenes en el directorio y una carpeta de avatar en el carpeta de imágenes.

El nombre del archivo al definir el almacenamiento de archivos generalmente usa una marca de tiempo como nombre de archivo para evitar la duplicación de los archivos cargados (no usé una marca de tiempo aquí).

upload.single('avatar') indica que se acepta la carga de un solo archivo y avatar representa el campo de parámetro al cargar un archivo. Para cargas de archivos múltiples .array(fieldname[, maxCount]), maxCount se utiliza para limitar el número máximo de cargas.

La función de procesamiento en el archivo router_handler

exports.updateAvatar = (req, res) => {
    // 定义更新头像的sql
    const sql = 'update users set avatar=? where id=?;'
    // console.log(req);
    // console.log(req.body.id)
    // console.log(req.file);
    // console.log(req.file.destination);
    const avatarUrl = `http://127.0.0.1:3007/${req.file.destination.split('/')[1]}/${req.file.originalname}`
    // console.log(avatarUrl);
    // 执行sql语句
    db.query(sql, [avatarUrl, req.body.id], (err, results) => {
        // sql语句执行错误
        if(err) return res.cc(err)
        // sql语句执行成功，但影响的条数部位1属于执行失败
        if(results.affectedRows !== 1) return res.cc('更换头像失败！')
        // 更换头像成功
        res.cc('更换头像成功！', 0)
    })
}

La solicitud devuelta

En este momento, utilice req.file para obtener la información de la imagen cargada y req.body para obtener otros datos cargados.

Luego procese la ruta de la imagen y la ruta de la imagen se procesará de acuerdo con la situación real de su proyecto. Finalmente, ejecute la instrucción sql y guárdela en la base de datos.

La interfaz está procesada.

Si desea acceder a la imagen a través de la ruta en el navegador, debe agregarla al archivo app.js.

app.use(express.static('image'))

Convierta toda la carpeta de imágenes en archivos estáticos.

2. Escribe código de interfaz de usuario

El código de interfaz utiliza el componente del elemento como ejemplo. Utilice los componentes cargados en element. Varias de estas propiedades son más importantes.

acción es la URL de la solicitud. Si la interfaz que escribe necesita enviar un token, debe configurar los encabezados. los datos son un parámetro adicional en la solicitud, excepto el archivo de imagen. el nombre es el campo para cargar el archivo de imagen. El campo debe ser el mismo que el campo al definir la URL. Sea coherente, es el siguiente campo.