不用脚手架，引入vue，上传文件实现代码？
要在不使用脚手架的情况下，引入 Vue 并实现上传文件的功能，可以按照以下步骤进行：

  1. 在 HTML 文件中引入 Vue 和 Axios 库：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  1. 在 HTML 文件中定义 Vue 实例，并编写上传文件相关的代码：
<div id="app"><input type="file" @change="handleUpload" ref="fileInput"></div><script>new Vue({el: '#app',methods: {handleUpload() {const formData = new FormData();const file = this.$refs.fileInput.files[0];formData.append('file', file);axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先在 HTML 文件中定义了一个包含一个文件上传 input 元素的 Vue 实例，在其中编写了一个 handleUpload 方法用于处理上传文件事件。

当用户选择文件后，我们通过 FormData 对象创建了一个新的表单数据对象，并将选择的文件添加到其中。然后，使用 axios.post 方法向服务器发送一个 POST 请求，请求的 URL 是 /upload，此处需要根据实际情况进行修改。

当上传成功时，.then 方法会被执行，并在控制台打印 ‘上传成功’；当上传失败时，.catch 方法会被执行，并在控制台打印错误信息。

需要注意的是，在以上例子中，我们使用 ref 属性获取了 file input 元素的引用，并通过 this.$refs.fileInput.files[0] 获取了用户选择的文件。

多个不同文件呢？
可以修改 handleUpload 方法，用一个数组来保存用户选择的多个文件，并将每个文件都添加到 FormData 对象中，然后一次性向服务器发送所有文件。以下是一个示例：

<div id="app"><input type="file" @change="handleUpload" ref="fileInput" multiple></div><script>new Vue({el: '#app',methods: {handleUpload() {const formData = new FormData();const files = this.$refs.fileInput.files;for (let i = 0; i < files.length; i++) {formData.append('files[]', files[i]);}axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先为 file input 元素设置了 multiple 属性，使得用户可以选择多个文件。然后，在 handleUpload 方法中，我们定义了一个空 FormData 对象和一个用于保存文件的空数组。

通过遍历选择的文件列表，并依次将每个文件添加到 FormData 对象中，并指定表单参数名为 ‘files[]’。这里需要注意的是，表单参数名需要以数组形式传递，即多个文件都会被作为同一个参数名的数组元素进行传递。

最后，我们使用 axios.post 方法向服务器发送一个 POST 请求，请求的 URL 是 /upload，并把包含所有文件的 FormData 对象作为参数进行提交。

我还想把其中的图片预览
要预览上传的图片，可以在用户选择文件时，将图片的 Base64 编码存储到 Vue 实例中，并使用 URL.createObjectURL 生成一个预览链接保存在另一个数组中，最后在页面上渲染这些预览链接。以下是一个示例：

<div id="app"><input type="file" @change="handleUpload" ref="fileInput" multiple><div v-for="(url, index) in previewUrls" :key="index"><img :src="url" width="200"></div></div><script>new Vue({el: '#app',data() {return {files: [],previewUrls: []};},methods: {handleUpload() {const formData = new FormData();const files = this.$refs.fileInput.files;for (let i = 0; i < files.length; i++) {formData.append('files[]', files[i]);if (/^image\//.test(files[i].type)) {const reader = new FileReader();reader.readAsDataURL(files[i]);reader.onload = () => {this.previewUrls.push(reader.result);};}}axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先定义了一个名称为 previewUrls 的数组，用于保存所有文件的预览链接。当用户选择文件时，我们遍历每个文件，并把它们添加到 FormData 对象中。如果当前文件是一张图片，我们使用 FileReader 对象读取并解析它的 Base64 编码，并把解析结果添加到 previewUrls 数组中。

需要注意的是，在使用 FileReader 对象时，必须在 readAsDataURL 方法之后，通过 onload 回调函数处理读取完成后返回的内容。

最后，当文件列表和预览列表都准备好了，我们可以使用 Vue 的 v-for 指令，在页面上渲染所有的预览链接，并以相应文件的index作为其key值进行区分展示，图片预览相关内容在 v-for 循环内展示出来以实现动态渲染。

设置图片不变形，超出部分隐藏
要设置图片不变形、超出部分隐藏，可以使用 CSS 的 object-fit 和 object-position 属性。object-fit 属性用于指定当图片尺寸与容器尺寸不同时如何调整图片大小，而 object-position 属性则用于指定图片在容器中显示的位置。

以下是一个示例：

<div id="app"><input type="file" @change="handleUpload" ref="fileInput" multiple><div v-for="(url, index) in previewUrls" :key="index" class="preview-container"><img :src="url" class="preview-image"></div></div><style>.preview-container {width: 200px;height: 200px;overflow: hidden;}.preview-image {width: 100%;height: 100%;object-fit: cover;object-position: center center;}</style><script>new Vue({el: '#app',data() {return {files: [],previewUrls: []};},methods: {handleUpload() {const formData = new FormData();const files = this.$refs.fileInput.files;for (let i = 0; i < files.length; i++) {formData.append('files[]', files[i]);if (/^image\//.test(files[i].type)) {const reader = new FileReader();reader.readAsDataURL(files[i]);reader.onload = () => {this.previewUrls.push(reader.result);};}}axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们为每个预览容器设置了一个宽度和高度，并通过 overflow: hidden 属性隐藏超出容器范围的部分。而为了让图片填满容器并保持比例不变，我们为图片设置了 width: 100% 和 height: 100% 属性，并使用 object-fit: cover 属性指定将图片等比例缩放以完全覆盖容器。

同时，为了让图片可见区域居中显示，我们还可以使用 object-position: center center 属性来指定其水平和垂直方向上的位置。

上传的同时带上参数，怎么实现？
要在文件上传时同时带上参数，可以使用 FormData 对象的 append() 方法向表单中添加额外的数据。

以下是一个示例：

<div id="app"><input type="file" @change="handleUpload" ref="fileInput" multiple></div><script>new Vue({el: '#app',methods: {handleUpload() {const formData = new FormData();const files = this.$refs.fileInput.files;// 向 FormData 中添加 param1 和 param2 参数formData.append('param1', 'value1');formData.append('param2', 'value2');for (let i = 0; i < files.length; i++) {formData.append('files[]', files[i]);}axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们使用 formData.append() 将 param1 和 param2 参数添加到表单中，并设置它们的值。在上传文件时，我们把包含所有文件和额外参数的 FormData 对象作为 POST 请求的数据，然后将其提交到服务器上。
要在上传文件时设置允许的文件格式，你可以通过在 input 标签中添加 accept 属性来限制用户输入的文件类型。这个属性的值可以是逗号分隔的 MIME 类型或者文件后缀名，多个类型之间用“|”符号隔开。

以下是一个示例：

<div id="app"><input type="file" @change="handleUpload" ref="fileInput" multiple accept=".png,.jpg,.jpeg"></div><script>new Vue({el: '#app',methods: {handleUpload() {const formData = new FormData();const files = this.$refs.fileInput.files;for (let i = 0; i < files.length; i++) {formData.append('files[]', files[i]);}axios.post('/upload', formData).then(response => {console.log('上传成功');}).catch(error => {console.error('上传失败：', error);});}}});</script>

在上述示例中，我们为 元素添加了 accept 属性，并将其值设为 “.png,.jpg,.jpeg”，以限制用户只能上传这三种类型的图片文件。如果用户选择了不符合规定的文件，则在上传时会出现错误提示。