使用nodejs后端进行单个图片上传以及渲染

后端 

1.首先要下载上传图片的插件 ：npm i multiparty

2.新建一个文件夹 通常是 upload文件夹 

3.在配置app.js中配置 

app.use('/upload',express.static(path.join(__dirname, 'upload')));

4.在index.js中引入multiparty包

5.写后端接口

前端

1.下载elementui 然后找上传的组件

2.样式格式都粘过来 action 中写的是接口 

action中连接的是接口 

img标签中 v-if和：src中存储的是form中img的路径 （需要在下面方法中重新定义img的路径）

3.定义img路径

4.渲染 ---elementui中选择表格组件

绿色的组件是 图片组件 全部复制（需要使用template 给包裹起来 然后slot-scope='scope'需要写）

图片组件中的：src 需要修改成scope.row.img

 如果需要大图预览的话 可以修改下面的:preview-src-list="[scope.row.img]" 数组里放本张图片的路径

 

渲染

前端

1.因为是渲染图片 不是渲染文本 所以前端需要使用template标签进行包裹（只要不是渲染文本 都需要使用template进行包裹）设置属性scope=‘scope’

因为渲染的是图片 所以使用ele 中的el-image 标签进行渲染  其中使用src进行动态属性操作 使用的是scope.row.path就可以了

***注意：在新增和渲染之前需要注意是否定义了path字段 并且新增的时候 新增的表单对象里是否加上了path字段 不然会造成渲染不成的结果

<el-table-column label="作品">
     <template scope="scope">
        <el-image :src="scope.row.path"></el-image>          
    </template>
</el-table-column>