Vue.js 使用apollo upload（GraphQL）的类星体框架（Vue）上传程序
我正试图通过阿波罗上传器上传一张照片Vue.js 使用apollo upload（GraphQL）的类星体框架（Vue）上传程序,vue.js,graphql,apollo,quasar,Vue.js,Graphql,Apollo,Quasar,我正试图通过阿波罗上传器上传一张照片 <q-uploader multiple :url="url" :upload-factory="uploadFactory"/> This is how I implement the Uploader. 在服务器端，我得到了以下信息： async uploadFile (parent, { file } ) { const { stream, filename, mimetype, encoding } = await file;
<q-uploader multiple :url="url" :upload-factory="uploadFactory"/> This is
how I implement the Uploader.
async uploadFile (parent, { file } ) {
const { stream, filename, mimetype, encoding } = await file;
var fs = require('fs');
const id = 1;
const uploadDir = __dirname;
const path = `${uploadDir}/${filename}`
var wstream = fs.createWriteStream(path);
wstream.write(stream);
wstream.end();
return { stream, filename, mimetype, encoding };
},
},
，我做了一个变通办法，但它能满足我的需要 客户：
<input-camera v-if="status=='S' && damage != null" ref="inputCamera" @photo="addFile" @popup="openPopup" @removePhoto="removeFile" v-bind:allowMultiple="true" v-bind:labelText="'Photos'" v-bind:id="id"/>
<template>
<q-uploader v-bind:value="value" ref="uploader" inverted color="red-8" :float-
label="labelText" :multiple='allowMultiple' :url="url" hide-upload-progress send-
raw hide-upload-button class="col-3" @add="addFile" @remove:cancel="removeFile"/>
</template>
<script>
import { format } from 'quasar'
export default {
name: "input-camera",
inheritAttrs: false,
data() {
return {
url: '',
listenerIndex: null,
}
},
props: { value: Boolean, allowMultiple: Boolean, labelText: String, id: String },
methods: {
addFile(file)
{
var resizedFile = null;
file = file[0];
var that = this;
if(file.type.match(/image.*/)) {
// Load the image
var metaData = {};
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 1024, // edit it, or get it from another param!
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var type = 'image/jpeg';
//choose one of the above
resizedFile = dataUrl;
var nextId = that.$refs.uploader._data.files.length;
nextId = nextId - 1;
//add image metadata
metaData['lastModified'] = that.$refs.uploader._data.files[nextId].lastModified;
metaData['name'] = that.$refs.uploader._data.files[nextId].name;
metaData['size'] = that.$refs.uploader._data.files[nextId].size;
metaData['type'] = type;
//back to parent
that.addNextListener();
that.$emit('photo', resizedFile, that.id, metaData);
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
},
removeFile(file)
{
var that = this;
var toFind = file.name;
var found = false;
var tempL = null;
for(let l = 0; l < this.$refs.uploader._data.files.length; l++)
{
if(this.$refs.uploader._data.files[l].name == toFind)
{
found = true;
tempL = l;
break;
}
}
if(found)
{
if(tempL != null) that.removeNextListener(tempL);
this.$emit('removePhoto', toFind, this.id);
}
},
updateUploaderImages: function(id, index, image){
// ToDo: below would work, but then we need other way to handle the original image
// this.$refs.uploader._data.files[index]['__img'].src = image;
},
addNextListener(nextListener)
{
var that = this;
if(nextListener == null)
{
nextListener = this.$refs.uploader._data.files.length-1;
const childs = this.$refs.uploader.$el.children[1].children[0].children[nextListener].children[0];
childs.id = 'image'+nextListener;
var selector = 'div#image'+nextListener;
this.listenerIndex = nextListener;
this.setListener(selector, 'click', that.openPopup, that.$refs.uploader.files[nextListener]);
}else{
for(let l = 0; l < nextListener.length; l++)
{
var listenerIndex = nextListener[l];
const childs = this.$refs.uploader.$el.children[1].children[0].children[listenerIndex].children[0];
childs.id = 'image'+listenerIndex;
var selector = 'div#image'+listenerIndex;
this.listenerIndex = listenerIndex;
this.setListener(selector, 'click', that.openPopup, that.$refs.uploader.files[listenerIndex]);
}
}
},
removeNextListener(index)
{
var that = this;
var nextListener = index;
var selector = 'div#image'+nextListener;
this.removeListener(selector, 'click', that.openPopup, that.$refs.uploader.files[nextListener]);
},
openPopup(img)
{
var that = this;
img = img['__img'].src;
this.$emit('popup', img , that.listenerIndex, that.id);
},
setListener(selector, event, callback, props)
{
var that = this;
var listenerElements = document.querySelectorAll(selector);
if(listenerElements != null)
{
for(var le=0; le<listenerElements.length; le++)
{
listenerElements[le].addEventListener(event, function(evt) {
if(callback != null) callback(props);
});
}
}
},
removeListener(selector, event, callback, props)
{
var that = this;
var listenerElements = document.querySelectorAll(selector);
if(listenerElements != null)
{
for(var le=0; le<listenerElements.length; le++)
{
listenerElements[le].removeEventListener(event, function(evt) {
if(callback != null) callback(props);
});
}
}
},
setImage(photos, id) {
var that = this;
var index = id - 1;
var listenerIndexes = [];
for(let l = 0; l < photos.length; l++)
{
var length = that.$refs.uploader._data.files.length;
var img = new Image;
// img.src = photos[l][id];
img.src = photos[l][l+1];
var metadata = photos[l].metaData;
var imgObject = {};
imgObject.lastModified = metadata.lastModified;
var DateTime = new Date(metadata.lastModified);
imgObject.lastModifiedDate = DateTime;
imgObject.name = metadata.name;
imgObject.size = metadata.size;
imgObject.type = metadata.type;
imgObject.webkitRelativePath = "";
imgObject.__doneUploading = false;
imgObject.__failed = false;
imgObject.__img = img;
imgObject.__progress = 0;
imgObject.__size = (metadata.size / 1024)+" kB";
imgObject.__timestamp = metadata.lastModified;
imgObject.__uploaded = false;
this.$refs.uploader._data.files[length] = imgObject;
this.$refs.uploader.totalSize = this.$refs.uploader.totalSize +
imgObject.size;
this.$refs.uploader.queue.push(imgObject);
this.$refs.uploader.expanded = true;
listenerIndexes.push(length);
}
setTimeout(function(){
that.addNextListener(listenerIndexes);
},50);
},
},
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` merges objects together to form a new object
return Object.assign({},
// We add all the listeners from the parent
this.$listeners,
// Then we can add custom listeners or override the
// behavior of some listeners.
{
// This ensures that the component works with v-model
input: function (event) {
vm.$emit('input', event);
//if(!isNaN(event)) vm.$emit('input', event.toString().replace('.',''))
//else return event.slice(0, -1);
}
}
)
}
},
}
</script>
从“quasar”导入{format}
导出默认值{
名称：“输入摄像机”，
继承属性：false，
数据（）{
返回{
url:“”，
listenerIndex:null，
}
},
道具：{value:Boolean，allowMultiple:Boolean，labelText:String，id:String}，
方法：{
添加文件（文件）
{
var resizedFile=null；
file=文件[0]；
var=这个；
if（file.type.match（/image.*/）{
//加载图像
var元数据={}；
var reader=new FileReader（）；
reader.onload=函数（readerEvent）{
var image=新图像（）；
image.onload=函数（imageEvent）{
//调整图像大小
var canvas=document.createElement（'canvas'），
max_size=1024，//编辑它，或从另一个参数获取它！
宽度=图像宽度，
高度=图像高度；
如果（宽度>高度）{
如果（宽度>最大尺寸）{
高度*=最大尺寸/宽度；
宽度=最大尺寸；
}
}否则{
如果（高度>最大尺寸）{
宽度*=最大尺寸/高度；
高度=最大尺寸；
}
}
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（'2d'）.drawImage（图像，0，0，宽度，高度）；
var dataUrl=canvas.toDataURL（'image/jpeg'）；
变量类型='image/jpeg'；
//从上面选择一个
resizedFile=dataUrl；
var nextId=that.$refs.uploader.\u data.files.length；
nextId=nextId-1；
//添加图像元数据
元数据['lastModified']=that.$refs.uploader.\u data.files[nextId].lastModified；
元数据['name']=that.$refs.uploader.\u data.files[nextId].name；
元数据['size']=that.$refs.uploader.\u data.files[nextId].size；
元数据['type']=type；
//回到父母身边
addNextListener（）；
.emit（'photo'，resizedFile，that.id，metaData）；
}
image.src=readerEvent.target.result；
}
reader.readAsDataURL（文件）；
}
},
移除文件（文件）
{
var=这个；
var toFind=file.name；
var=false；
var-temp=null；
对于（设l=0；l<template>
<q-uploader v-bind:value="value" ref="uploader" inverted color="red-8" :float-
label="labelText" :multiple='allowMultiple' :url="url" hide-upload-progress send-
raw hide-upload-button class="col-3" @add="addFile" @remove:cancel="removeFile"/>
</template>
<script>
import { format } from 'quasar'
export default {
name: "input-camera",
inheritAttrs: false,
data() {
return {
url: '',
listenerIndex: null,
}
},
props: { value: Boolean, allowMultiple: Boolean, labelText: String, id: String },
methods: {
addFile(file)
{
var resizedFile = null;
file = file[0];
var that = this;
if(file.type.match(/image.*/)) {
// Load the image
var metaData = {};
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 1024, // edit it, or get it from another param!
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var type = 'image/jpeg';
//choose one of the above
resizedFile = dataUrl;
var nextId = that.$refs.uploader._data.files.length;
nextId = nextId - 1;
//add image metadata
metaData['lastModified'] = that.$refs.uploader._data.files[nextId].lastModified;
metaData['name'] = that.$refs.uploader._data.files[nextId].name;
metaData['size'] = that.$refs.uploader._data.files[nextId].size;
metaData['type'] = type;
//back to parent
that.addNextListener();
that.$emit('photo', resizedFile, that.id, metaData);
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
},
removeFile(file)
{
var that = this;
var toFind = file.name;
var found = false;
var tempL = null;
for(let l = 0; l < this.$refs.uploader._data.files.length; l++)
{
if(this.$refs.uploader._data.files[l].name == toFind)
{
found = true;
tempL = l;
break;
}
}
if(found)
{
if(tempL != null) that.removeNextListener(tempL);
this.$emit('removePhoto', toFind, this.id);
}
},
updateUploaderImages: function(id, index, image){
// ToDo: below would work, but then we need other way to handle the original image
// this.$refs.uploader._data.files[index]['__img'].src = image;
},
addNextListener(nextListener)
{
var that = this;
if(nextListener == null)
{
nextListener = this.$refs.uploader._data.files.length-1;
const childs = this.$refs.uploader.$el.children[1].children[0].children[nextListener].children[0];
childs.id = 'image'+nextListener;
var selector = 'div#image'+nextListener;
this.listenerIndex = nextListener;
this.setListener(selector, 'click', that.openPopup, that.$refs.uploader.files[nextListener]);
}else{
for(let l = 0; l < nextListener.length; l++)
{
var listenerIndex = nextListener[l];
const childs = this.$refs.uploader.$el.children[1].children[0].children[listenerIndex].children[0];
childs.id = 'image'+listenerIndex;
var selector = 'div#image'+listenerIndex;
this.listenerIndex = listenerIndex;
this.setListener(selector, 'click', that.openPopup, that.$refs.uploader.files[listenerIndex]);
}
}
},
removeNextListener(index)
{
var that = this;
var nextListener = index;
var selector = 'div#image'+nextListener;
this.removeListener(selector, 'click', that.openPopup, that.$refs.uploader.files[nextListener]);
},
openPopup(img)
{
var that = this;
img = img['__img'].src;
this.$emit('popup', img , that.listenerIndex, that.id);
},
setListener(selector, event, callback, props)
{
var that = this;
var listenerElements = document.querySelectorAll(selector);
if(listenerElements != null)
{
for(var le=0; le<listenerElements.length; le++)
{
listenerElements[le].addEventListener(event, function(evt) {
if(callback != null) callback(props);
});
}
}
},
removeListener(selector, event, callback, props)
{
var that = this;
var listenerElements = document.querySelectorAll(selector);
if(listenerElements != null)
{
for(var le=0; le<listenerElements.length; le++)
{
listenerElements[le].removeEventListener(event, function(evt) {
if(callback != null) callback(props);
});
}
}
},
setImage(photos, id) {
var that = this;
var index = id - 1;
var listenerIndexes = [];
for(let l = 0; l < photos.length; l++)
{
var length = that.$refs.uploader._data.files.length;
var img = new Image;
// img.src = photos[l][id];
img.src = photos[l][l+1];
var metadata = photos[l].metaData;
var imgObject = {};
imgObject.lastModified = metadata.lastModified;
var DateTime = new Date(metadata.lastModified);
imgObject.lastModifiedDate = DateTime;
imgObject.name = metadata.name;
imgObject.size = metadata.size;
imgObject.type = metadata.type;
imgObject.webkitRelativePath = "";
imgObject.__doneUploading = false;
imgObject.__failed = false;
imgObject.__img = img;
imgObject.__progress = 0;
imgObject.__size = (metadata.size / 1024)+" kB";
imgObject.__timestamp = metadata.lastModified;
imgObject.__uploaded = false;
this.$refs.uploader._data.files[length] = imgObject;
this.$refs.uploader.totalSize = this.$refs.uploader.totalSize +
imgObject.size;
this.$refs.uploader.queue.push(imgObject);
this.$refs.uploader.expanded = true;
listenerIndexes.push(length);
}
setTimeout(function(){
that.addNextListener(listenerIndexes);
},50);
},
},
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` merges objects together to form a new object
return Object.assign({},
// We add all the listeners from the parent
this.$listeners,
// Then we can add custom listeners or override the
// behavior of some listeners.
{
// This ensures that the component works with v-model
input: function (event) {
vm.$emit('input', event);
//if(!isNaN(event)) vm.$emit('input', event.toString().replace('.',''))
//else return event.slice(0, -1);
}
}
)
}
},
}
</script>