vue elm 上传图片 前后端

Vue和Elm都是前端框架，上传图片需要与后端进行交互来完成。一般来说，前端会使用Ajax或者Fetch等技术将图片传输到后端，后端则会将图片存储到服务器或者云存储上。下面是一个简单的上传图片的例子：

前端Vue代码：

<template>
  <div>
    <input type="file" @change="uploadImage">
  </div>
</template>

<script>
export default {
  methods: {
    uploadImage(event) {
      const formData = new FormData();
      formData.append('file', event.target.files[0]);
      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
    }
  }
}
</script>

后端Node.js代码：

const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send({ success: true });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

这个例子中，我们使用了Fetch API将图片上传到后端，并且后端使用了multer库将上传的文件存储到uploads目录下。你可以根据自己的需求进行修改，比如存储到云存储上，或者使用其他的上传文件库。