node+vue+element实现简单的图片上传跟预览

node+vue+element实现简单的图片上传跟预览

前端(分组件写的)
新建vendor文件夹跟index.vue

<template>
  <div>
    <div>
      <el-upload
        :show-file-list="false"
        :http-request="upload.bind(this)"
        action=""
      >
      上传文件
      </el-upload>
      <el-button @click="btnClick">查看</el-button>
    </div>
    <martreFileList v-if="martreNewFileList" :martersList="martersList"></martreFileList>
  </div>
</template>

<script>
import axios from "axios"
import martreFileList from '../martreFileList/imdex'
export default {
  data() {
    return {
      resultData: [],
      martreNewFileList:false,
      martersList:[]
    };
  },
  methods: {
  // 使用element-ui组件 实现文件上传
    upload(file,fileList){
      let arrnewList  = []
      let forms = new FormData();
      arrnewList.unshift(file.file);
      arrnewList.forEach((element) => {
        forms.append("file", element);
      });
      axios.post('http://localhost:3000/uploading',forms,{
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(res=>{
        if(res.data.ok){
          this.$nextTick(_=>{
            this.martersList.unshift(res.data)
          })
        }
      })
    },
    btnClick(){
      this.martreNewFileList = true
    }
  },
  components:{
    martreFileList
  },

};
</script>

<style lang="less">
</style>

新建martreFileList文件夹跟index.vue

// 用表格的方法是分单图片跟多图片(未写多文件)
<template>
  <div>
    <el-table 
      :data="martersList"
    >
      <el-table-column
        label="图片名字"
        prop="filename"
      >
      </el-table-column>
      <el-table-column label="查看"
      >
        <template slot-scope="scope">
          <span @click="showFile(scope.row)">查看</span>
        </template>
      </el-table-column>
    </el-table>
    <pdf v-if="srcImage" :srcResult="src" ref="pdf"></pdf>
  </div>
</template>

<script>
import axios from 'axios'
import pdf from '../pdf'
  export default {
    data() {
      return {
        src:null,
        srcImage:false
      }
    },
    props:["martersList"],
    components:{
      pdf
    },
    methods:{
      showFile(row){
        this.srcImage = true
        axios.post("http://localhost:3000/showFile",{
          params:row.filename
          //responseType:"arraybuffer"
        }).then(res=>{
          if(res.data.ok){
            this.$nextTick(_=>{
            this.$refs.pdf.printVisible = true
            this.src = res.data.srcImage
            })
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
span{
  cursor: pointer;
}
</style>

新建pdf文件夹建立index.vue

// 形成弹窗的样子返回
<template>
  <div>
     <el-dialog :visible.sync="printVisible"
      :close-on-click-modal="false" :show-close="false"
     >
        <img :src="srcResult" alt="">
     </el-dialog>
  </div>
</template>
<script>
  export default {
    props:['srcResult'],
    data() {
      return {
        printVisible:false
      }
    },
  }
</script>
<style lang="less" scoped>
</style>

node 后端

// 文件上传
app.post("/uploading", (req, res) => {
  if (!fs.existsSync('./public/image')) {
    fs.mkdirSync('./public/image', {
      recursive: true
    });
  }
  let form = new multiparty.Form({uploadDir:'./public/image'}) // 设置文件储存目录
    form.parse(req, (err, field , files) => {
      console.log(files.file)
      files.file.map(ele=>{
        fs.rename(ele.path, './public/image/' + ele.originalFilename,()=>{
          let pic = {filename:ele.originalFilename}
          res.json({filename:pic.filename,ok:true,})
      })
    })
  })
})

图片查看

app.post('/showFile',(req,res)=>{
 let image = req.body.params
 res.json({srcImage: `http://localhost:3001/public/image/${image}`,ok:true})
//  let image = req.body.params // 转base64返回前端
// fs.readFile(`./public/image/${image}`,'binary',function(err,data){
//   if(err) throw err
//   else{
//     let bufferData = Buffer.from(data).toString("base64")
//     res.send(bufferData)   
//   }
// })
})